为什么在伪元素之前使用：before来显示字形图标？

Question

这个问题困扰了我很久。似乎所有字形图标库都通过这种方式提供了图标，例如Font Awesome。这是将字形放入CSS的唯一方法吗？还是最好的方法？

a:before {
   font-family: FontAwesome;
   content: "\f095";
}

Answer 1

我觉得这个问题可以分为两个独立的问题：

1. 为什么要使用字体作为图标？

2. 为什么使用：before伪元素显示它们？

对于第一部分，原因很多，但是归结为易于使用（因为它们是矢量，具有自然透明的背景，可以轻松更改颜色），即使在较旧的浏览器上也具有很好的支持。

对于第二部分，使用伪元素意味着您的图标可以完全“活动”在CSS文件中。除了在这里进行编辑更容易之外，它们也是它们的所在-它们不是您内容的一部分，而是会影响内容外观的内容，因此不应出现在HTML中。可以将其视为与img标签和background-image CSS属性之间的区别（再次-设计与内容）。

此外，这可以防止一些奇怪的副作用，例如，无法选择伪元素，因此无法复制伪元素。如果不是这种情况，所有图标在复制时都会在复制它们的目标位置产生奇怪的字符。