使 font-awesome 的堆栈图标起作用的 CSS 是什么？
What is the CSS that makes font-awesome's stack icons work?
谁能解释一下 font awesome 的堆栈图标后面的 css？我正在尝试创建自己的自定义堆栈图标字体，但我无法让它们按照 font-awesome 设法做到的方式进行堆叠。
我不确定他们设法制作堆栈 "happen" 的具体 css 是什么。
（据我所知，这不是重复的：有很多关于如何使用 font-awesome 堆栈图标的问题，但 none 它背后的机制。）
图标本身包含在 FontAwesome 字体中。神奇之处在于帮助程序 CSS classes 的数量可以让您 select 一个图标字符并让您轻松定位这些图标。每个 class 负责一项功能，因此它们一起为您提供图标的模块化构建。
堆叠
当使用 FontAwesome 堆叠两个图标时，您需要使用 class fa-stack 的额外跨度。这个 span 添加了 position: relative，它允许你绝对定位两个堆叠的图标，并通过这样做，使它们重叠。
大小也设置为 2em，因为背景（或叠加层）的大小是普通图标的两倍。给它这个确切的宽度可以确保图标有足够的 space，而且较小的图标可以正确地水平居中。
span 内的图标有一个 class，例如 fa-stack-1x 或 fa-stack-2x，这决定了它们在父 span 内的大小和位置。
因此，总结最值得注意的 classes（用于图标和堆叠）：
fa设置正确的字体。这基本上是用一个元素制作一个图标。fa-twitter，还有许多其他让你 select 的角色。 ::before伪元素的content中的CSS中添加了这个字符。fa-stack 定义一个容器来包含堆叠的图标。添加 position: relative，因此您可以在其中完全定位图标。fa-stack-2x 使图标大小增加一倍，并将其定位在父容器中的 0,0 处。用于背景或覆盖图标。fa-stack-1x 使用父级宽度的 100% 并将图标居中放置。用于与 background/overlay 图标一起使用的较小图像图标。
其他功能（如旋转）的工作方式类似，只需添加正确的 class。
我用font-awesome提供的CDN文件给大家讲解一下：
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
我们来看看这个html：
制作这张html渲染图标的css如下：
.fa {
font: normal normal normal 14px/1 FontAwesome;
}
此声明告诉 class FA 使用 font-awesome 字体。
然后，对于您添加的任何 fa-whateverIconName，您将拥有以下内容：
.fa-connectdevelop:before {
content: "\f20e"
}
所以基本上，当您使用 font-awesome 给定的 classes 时，您的 html 项目将获得正确的字体和带有 class 相应图标的 before 伪元素.
谁能解释一下 font awesome 的堆栈图标后面的 css？我正在尝试创建自己的自定义堆栈图标字体，但我无法让它们按照 font-awesome 设法做到的方式进行堆叠。
我不确定他们设法制作堆栈 "happen" 的具体 css 是什么。
（据我所知，这不是重复的：有很多关于如何使用 font-awesome 堆栈图标的问题，但 none 它背后的机制。）
图标本身包含在 FontAwesome 字体中。神奇之处在于帮助程序 CSS classes 的数量可以让您 select 一个图标字符并让您轻松定位这些图标。每个 class 负责一项功能，因此它们一起为您提供图标的模块化构建。
堆叠
当使用 FontAwesome 堆叠两个图标时，您需要使用 class fa-stack 的额外跨度。这个 span 添加了 position: relative，它允许你绝对定位两个堆叠的图标，并通过这样做，使它们重叠。
大小也设置为 2em，因为背景（或叠加层）的大小是普通图标的两倍。给它这个确切的宽度可以确保图标有足够的 space，而且较小的图标可以正确地水平居中。
span 内的图标有一个 class，例如 fa-stack-1x 或 fa-stack-2x，这决定了它们在父 span 内的大小和位置。
因此，总结最值得注意的 classes（用于图标和堆叠）：
fa设置正确的字体。这基本上是用一个元素制作一个图标。fa-twitter，还有许多其他让你 select 的角色。::before伪元素的content中的CSS中添加了这个字符。fa-stack定义一个容器来包含堆叠的图标。添加position: relative，因此您可以在其中完全定位图标。fa-stack-2x使图标大小增加一倍，并将其定位在父容器中的 0,0 处。用于背景或覆盖图标。fa-stack-1x使用父级宽度的 100% 并将图标居中放置。用于与 background/overlay 图标一起使用的较小图像图标。
其他功能（如旋转）的工作方式类似，只需添加正确的 class。
我用font-awesome提供的CDN文件给大家讲解一下： http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
我们来看看这个html：
制作这张html渲染图标的css如下：
.fa {
font: normal normal normal 14px/1 FontAwesome;
}
此声明告诉 class FA 使用 font-awesome 字体。
然后，对于您添加的任何 fa-whateverIconName，您将拥有以下内容：
.fa-connectdevelop:before {
content: "\f20e"
}
所以基本上，当您使用 font-awesome 给定的 classes 时，您的 html 项目将获得正确的字体和带有 class 相应图标的 before 伪元素.