图标字体：字体与字体类中的连字

Question

在图标字体中使用字体连字是一种趋势。 图标名称以连字形式存储在字体文件中。

优点是：不需要为每个图标创建css类，html代码更短。

所以你可以写

<i class="icon">arrow-left</i>

而不是

<i class="fa fa-arrow-left"></i>

两者哪个版本的浏览器性能更好？ （在第一个示例中，CSS 文件不包含附加类，在第二个示例中，字体没有任何连字）。

这可能比两者都有更好的性能：

<i class="icon">&#61023;</i>

没有图标类+没有连字，但是当更多的图标添加到字体中时，字符代码不能改变，你必须知道所有的字符代码。你也可以直接插入字符，但编辑器可能不会显示它。

Answer 1

首先我真正不喜欢的是“i”标签如何被用作图标的缩写，它用于惯用的文本。

我喜欢的方式：

<span class="icon">icon-ligature</span>

它肯定会缩短您必须包含的 css，因为您通常会为每个图标设置一个类。

出于性能原因，我不会改变方法，但从字体维护者的角度来看，如果您需要额外的字体图标，您只需使用正确的连字将其添加到字体中，您就可以使用您需要的类方法在 css 中添加一个类到 unicode 映射 + 修补字体。