使用图标字体的替代方法答案

【问题标题】：Alternative way of using an icon font使用图标字体的替代方法
【发布时间】：2015-11-26 15:28:03
【问题描述】：

我试图避免在我的 html/css 中使用 {<i>} 和 :before 类。所以，我最终使用了这种方式：

**CSS**

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

}

.iFont{
    font-family: "mtv";
    font-size: 18px;
    color: #269AE0;
}

HTML

<div class="iFont">a</div>

你认为它会因为某种原因而出现问题吗？

【问题讨论】：

你为什么要避免<i>？
在语义上，我认为 div 更接近元素的实际使用（图标）。另一方面，这不适用于 div 的内容。这就是为什么我不确定这是否是使用图标字体的正确方法。
从语义上讲，span 会比 div 更好，但这只是一种意见..
我认为使用<i> 是因为它是一个内联元素并将文本包装在一个段落中。这是一个i，就像icon一样。

标签： html css fonts icons

【解决方案1】：

不，它非常好，因为您在上面使用了font-face，然后在仅包含文本的 div 中应用font-family 不会产生任何问题。上面的代码可以正常工作。来吧！

【讨论】：