当我在 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）：
干杯。