:before 伪元素如何变为共享图标答案

【问题标题】：How the :before psuedo element changes into share icon:before 伪元素如何变为共享图标
【发布时间】：2016-12-29 21:20:19
【问题描述】：

我看到很多网站都给出了 before 元素的内容，例如

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

它首先看起来像一个盒子，然后变成一个推特图标，没有使用背景图像或javascript，有人可以解释这些图标是如何创建的，你可以在http://www.freelancerinsights.com/upwork-reject-profile/看到一个例子

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

在当前情况下，大多数 Web 开发人员创建字体并将它们嵌入到图标中。例如，您可以检查 fontawesome，他们如何使用 http://fontawesome.io/icons/

【讨论】：

【解决方案3】：

它们是使用 Font Awesome 网络字体图标创建的：http://fontawesome.io/

此外，它们是通过以下组合创建的：

网络字体文件（通过字体的字符集将\f099 的 HTML 实体更改为特定图标）
HTML 元素上的 CSS 类，让浏览器知道在哪里执行此操作以及使用什么图标。 Font Awesome CSS 使用 i 元素上的 fa 和 fa-twitter。
利用::before 伪元素（完全通过CSS 完成）来显示图标。

【讨论】：

【解决方案4】：

这些类型的图标由 Font Awesome 生成，它为您提供scalable vector icons，它会根据字体和屏幕大小自动缩放。

你只需要包含必要的字体真棒css文件，然后给一个类像

fa fa-twitter，您将拥有 Twitter 图标。

更多信息请参考此链接http://fontawesome.io/

【讨论】：