Twitter Bootstrap and Elegant Icons Displaying Double Icons

When I paste the icon in the html, the icons come out twice. I'm not sure why the icon is displayed twice. I have tried many different approaches to fix this to no avail. I'm not sure why this behavior is happening.

HTML input:

<div class="icon">
    <i class="icon_cloud-upload_alt"></i>
</div>

      

        
        
        
      

    

CSS

@font-face {
    font-family: 'ElegantIcons';
    src:url('../fonts/ElegantIcons.eot');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ElegantIcons';
    src:url('../fonts/ElegantIcons.eot');
    src:url('../fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ElegantIcons.woff') format('woff'),
        url('../fonts/ElegantIcons.ttf') format('truetype'),
        url('../fonts/ElegantIcons.svg#ElegantIcons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon_cloud-upload_alt {
    font-family: 'ElegantIcons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.icon_cloud-upload_alt:before {content: "\e003";}

      

        
        
        
      

    

Browser (Chrome and IE and Safari):

Greetings.