html - :before psuedo element changes into share icon怎么办

Question

我看到很多网站的 before 元素的内容是这样给出的

twitter.icon:之前{ 内容:'\f099'

它首先看起来像一个方框，然后变成一个 twitter 图标，没有使用背景图像或 javascript，有人可以解释一下这些图标是如何创建的吗，您可以在 http://www.freelancerinsights.com/upwork-reject-profile/ 上查看示例

简而言之，我想知道在上面的站点中，共享图标是如何创建的，他们既不使用背景图像也不使用图像，那么他们是如何创建这些图标的呢？

Answer 1

这些图标是用矢量图标字体创建的，例如 Font Awesome .访问他们的网站，获取有关如何在您的元素中实现 FA 的简单说明。

在您链接的网站上，检查您提到的社交图标会发现 Font Awesome 实现:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}