Question

我看过很多网站，其中包含了之前元素的内容，如

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

它首先看起来像一个盒子，然后变成一个推特图标，没有使用背景图像或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;
}

Answer 2

在当前场景中，大多数Web开发人员创建字体并将其嵌入图标中。你可以查看fontawesome，例如，他们如何使用 http://fontawesome.io/icons/

Answer 3

它们是使用Font Awesome webfont图标创建的：http://fontawesome.io/

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

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

Answer 4

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

您只需要包含必要的字体真棒css文件，然后将类添加到像

这样的元素中

fa fa-twitter你将拥有推特图标。

有关详细信息，请参阅此链接http://fontawesome.io/

如何：在psuedo元素之前更改为共享图标

4 个答案: