4

When I insert an icon into the html, the icons get rendered twice. I am not sure why the icon is outputted two times. I have tried a multitude of different approaches to rectify this to no avail. I am 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):

enter image description here

Cheers.

dfsq
  • 191,768
  • 25
  • 236
  • 258
uglychef
  • 41
  • 2

2 Answers2

0

You should not need to declare the .eot file twice. It seems that you can remove the first @font-face.

Joel
  • 87
  • 8
0

just remove the lte-ie7.js in your HTML code or any javascript file comes with the elegant-font.zip.

RayanFar
  • 539
  • 11
  • 28