有人可以解释Font Awesome堆栈图标后面的CSS吗?我正在尝试创建自己的自定义堆栈图标字体,但是我无法让它们以超棒的字体进行堆栈。
我不确定WHICH是他们设法使堆栈“出现”的特定CSS。
(据我所知,这不是重复的:关于如何使用字体超棒的堆栈图标有很多问题,但其机制背后没有一个问题。)
最佳答案
图标本身包含在FontAwesome字体中。神奇的是帮助器CSS类的数量,它们使您可以选择图标字符并轻松放置这些图标。每个类都负责一项功能,因此,它们共同为您提供图标的模块化构建。
堆码
当使用FontAwesome堆叠两个图标时,您需要对类fa-stack
进行额外的设置。此跨度增加了position:relative,使您可以绝对地放置两个堆叠的图标,并这样做,使它们重叠。
大小也设置为2em,因为背景(或覆盖)的大小是普通图标的两倍。赋予它确切的宽度可以确保为图标声明足够的空间,而且可以确保较小的图标在水平方向上正确居中。
跨度内的图标具有类似fa-stack-1x
或fa-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/