css - Twitter Bootstrap 和优雅的图标呈现双图标

Question

当我在 html 中插入一个图标时，图标会被渲染两次。我不确定为什么图标会输出两次。我尝试了多种不同的方法来纠正这个问题，但无济于事。我不确定为什么会发生这种行为。

HTML 输入:

<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";}

浏览器(Chrome 和 IE 和 Safari):



干杯。

Answer 1

您不需要两次声明 .eot 文件。看来您可以删除第一个@font-face。