为什么使用 :before 伪元素来显示字形图标？答案

【问题标题】：Why use :before pseudo-elements to display glyph icons?为什么使用 :before 伪元素来显示字形图标？
【发布时间】：2016-12-13 01:20:42
【问题描述】：

这个问题在我脑海里萦绕了很长时间。似乎所有字形图标库都通过这种方式提供图标，例如Font Awesome。这是将字形放入css的唯一方法吗？还是这是最好的方法？

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

【问题讨论】：

标签： css glyph

【解决方案1】：

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

为什么要为图标使用字体？
为什么要使用 :before 伪元素来显示它们？

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

对于第二部分，使用伪元素意味着您的图标可以完全“活”在您的 CSS 文件中。除了在那里更容易编辑之外，这也是它们所属的地方 - 它们不是您内容的一部分，而是影响其外观的东西，因此不应该出现在您的 HTML 中。把它想象成same distinction as between img tag and background-image CSS property（再一次 - 设计与内容）。

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

【讨论】：

谢谢。我的问题是第二个。

【解决方案2】：

您也可以将它们用作“i”标签。我们可以通过这种方式应用更多创造性的 CSS。这是一个代码笔：

http://codepen.io/anon/pen/gLdYqj

<script src="https://use.fontawesome.com/2d1d8af5b4.js"></script>
<div><i class="fa fa-user"></i></div>


div{
  font-size:50px;
}
i{
  color:blue;
}
i:hover{
  color:red;
  cursor:pointer;
}

【讨论】：