使font-awesome的堆栈图标有效的CSS是什么？

Question

有人可以解释字体真棒的堆栈图标背后的CSS吗？我正在尝试创建自己的自定义堆栈图标字体，但我无法让它们以字体 - 真棒管理的方式进行堆叠。

我不确定WHICH是他们设法使堆栈“发生”的具体css。

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

Answer 1

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

堆积 使用FontAwesome堆叠两个图标时，您需要一个类<texto-principal owner="John"></texto-principal> 的额外范围。这个范围增加了position：relative，它允许你绝对地定位两个堆叠的图标，这样做会使它们重叠。

尺寸也设置为2em，因为背景（或叠加）的尺寸是普通图标的两倍。给它确认这个确切的宽度可以确保为图标声明足够的空间，同时也可以使较小的图标正确地水平居中。

跨度内的图标会获得类似fa-stack或fa-stack-1x的类，它们决定了它们在父级范围内的大小和位置。

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

• fa-stack-2x设置正确的字体。这基本上是一个元素的图标。
• fa，还有许多其他人可以选择一个角色。此字符将添加到fa-twitter伪元素的content中的CSS中。
• ::before定义了一个容器，用于包含堆叠的图标。添加fa-stack，因此您可以绝对在其中放置图标。
• position: relative使图标大小增加一倍，并将其定位在父容器中的0,0处。用于背景或叠加图标。
• fa-stack-2x使用父级宽度的100％并将图标置于其中心。用于与背景/叠加图标一起使用的较小图像图标。

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

Answer 2

我将使用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;
}

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

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

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

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