有人可以解释Font Awesome堆栈图标后面的CSS吗?我正在尝试创建自己的自定义堆栈图标字体,但是我无法让它们以超棒的字体进行堆栈。

我不确定WHICH是他们设法使堆栈“出现”的特定CSS。

(据我所知,这不是重复的:关于如何使用字体超棒的堆栈图标有很多问题,但其机制背后没有一个问题。)

最佳答案

图标本身包含在FontAwesome字体中。神奇的是帮助器CSS类的数量,它们使您可以选择图标字符并轻松放置这些图标。每个类都负责一项功能,因此,它们共同为您提供图标的模块化构建。

堆码
当使用FontAwesome堆叠两个图标时,您需要对类fa-stack进行额外的设置。此跨度增加了position:relative,使您可以绝对地放置两个堆叠的图标,并这样做,使它们重叠。

大小也设置为2em,因为背景(或覆盖)的大小是普通图标的两倍。赋予它确切的宽度可以确保为图标声明足够的空间,而且可以确保较小的图标在水平方向上正确居中。

跨度内的图标具有类似fa-stack-1xfa-stack-2x的类,该类指示其大小和在父跨度内的位置。

因此,总结最著名的类(用于图标和堆栈):


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


其他功能(例如旋转)通过添加正确的类以类似的方式工作。

关于css - 什么是使font-awesome的堆栈图标起作用的CSS?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31391735/

10-12 12:53
查看更多