使 font-awesome 的堆栈图标起作用的 CSS 是什么？答案

【问题标题】：What is the CSS that makes font-awesome's stack icons work?使 font-awesome 的堆栈图标起作用的 CSS 是什么？
【发布时间】：2015-07-13 19:23:14
【问题描述】：

有人能解释一下 font awesome 的堆栈图标背后的 css 吗？我正在尝试创建自己的自定义堆栈图标字体，但我无法让它们以 font-awesome 设法做到这一点的方式堆叠。

我不确定他们设法使堆栈“发生”的特定 css 是什么。

（据我所知，这不是重复的：关于如何使用字体真棒的堆栈图标有很多问题，但没有一个背后的机制。）

【问题讨论】：

右键单击“检查元素”，您可以准确看到应用了哪些样式。
我可以确切地看到样式，但我想了解它。例如，为什么他们需要将 2em 添加到堆栈类中？我知道他们对堆栈类使用相对定位，而对堆叠图标使用绝对定位，但是它们如何使它们按照它们的方式排列？

【解决方案1】：

图标本身包含在 FontAwesome 字体中。神奇之处在于帮助 CSS 类的数量，它们可以让您选择一个图标字符并让您轻松定位这些图标。每个类负责一个功能，因此它们一起为您提供了一个图标的模块化构建。

堆叠当使用 FontAwesome 堆叠两个图标时，您需要使用 fa-stack 类的额外跨度。这个跨度添加了 position: relative，它允许您绝对定位两个堆叠的图标，并通过这样做使它们重叠。

大小也设置为 2em，因为背景（或覆盖）的大小是普通图标的两倍。给它这个确切的宽度可以确保为图标占用足够的空间，而且较小的图标可以适当地水平居中。

span 内的图标有一个类似fa-stack-1x 或fa-stack-2x 的类，指示它们在父 span 中的大小和位置。

所以，总结一下最值得注意的类（用于图标和堆叠）：

其他功能，如旋转，只需添加正确的类即可以类似的方式工作。

【讨论】：

啊。我明白为什么我遇到问题了。我已经对我的一些图标进行了定位。所以绝对覆盖它们，它们不会像我期望的那样分层。
我也无法将我想要堆叠在顶部的那个作为顶层。我将 z-index 添加到我想放在底部那个顶部的单个图标上（ z-index 较低），但它似乎不起作用。我在中切换了 div 的顺序，它没有做任何事情。我希望我能放一个小提琴，但它需要我将我的图标上传到某处...？
如果根本不加z-index，可以让DOM中元素的顺序决定哪一个在最上面。检查examples 并看到no camera 图标有一个覆盖，而flag on circle 有一个背景。唯一的区别是元素的顺序。

【解决方案2】：

让我们看一下这个html：

让这段 html 渲染成图标的 css 如下：

.fa {
    font: normal normal normal 14px/1 FontAwesome;
}

这个声明告诉 FA 类使用 font-awesome 字体。

然后，对于您添加的任何 fa-whateverIconName，您将拥有以下内容：

.fa-connectdevelop:before {
    content: "\f20e"
}

所以基本上，当你使用 font-awesome 的给定类时，你的 html 项会获得正确的字体和一个带有类对应图标的 before 伪元素。

【讨论】：