Question

我看过font-awesome图标的所有图标都有'fa'类：

<i class='fa fa-snapchat-ghost'></i>

为什么不简单

<i class='fa-snapchat-ghost'></i>

？课程fa给你什么？

Answer 1

jmoerdyk链接到CSS文件中的效率问题......

在每个图标中添加@extend .fa指令：

a）从理论角度反对CSS的基础。

b）添加更多行代码而不是简单地为每个图标分配一个类，以便正确呈现。

Answer 2

与Bootstrap（或任何其他框架）依赖多个CSS标签的原因没什么不同;代码效率和避免冗余。考虑：

所有Font Awesome图标都需要使用Font Awesome Font。
它们必须具有相同的display以及其他CSS样式应用

如果没有.fa，每个图标都需要重复这些样式，为代码添加不必要的膨胀，并增加在添加新图标时可能出现差异的可能性。

由于重复，CSS文件的整体大小（甚至缩小）会更大，因此也存在这种担忧。

Answer 3

这是.fa给出的内容：

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

因此，除了您显示的图标外，此样式也会得到应用。

检查完整的source code

为什么要在所有font-awesome图标前添加“fa”类？

3 个答案: