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

Question

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

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

(据我所知，这不是重复的:有很多关于如何使用 font-awesome 堆栈图标的问题，但没有一个关于其机制的问题。)

Answer 1

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

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

大小也设置为 2em，因为背景(或覆盖层)的大小是普通图标的两倍。给它这个精确的宽度可以确保为图标分配足够的空间，而且较小的图标可以正确地水平居中。

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

所以，总结一下最值得注意的类(图标和堆叠):

• fa 设置正确的字体。这基本上是从一个元素中生成一个图标。
• fa-twitter，还有许多其他的让您选择一个 Angular 色。该字符添加到 CSS 中 ::before 伪元素的 content 中。
• fa-stack 定义一个容器来包含堆叠的图标。添加 position:relative，这样您就可以在其中绝对定位图标。
• fa-stack-2x 使图标大小变为两倍，并将其定位在父容器中的 0,0 处。用于背景或覆盖图标。
• fa-stack-1x 使用父级宽度的 100% 并将图标置于其中。用于与背景/覆盖图标一起使用的较小图像图标。

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