插入符号
之后就可以直接插入各类 Font Awesome 符号了,其基础用法是:
<i class="fa-brands fa-weixin"></i>
这表示一个微信图标的符号。直接把它写入文档中即可在编译时得到如下效果:
修改符号格式
使用 Font Awesome 的另一个优点是,除了上述简单的符号调用,还可以对这些符号进行格式的修改,以实现更丰富的排版可能性。下面列举几个日常用得到的有趣格式。
调节尺寸
要调节符号的尺寸,只需对其名称加上尺寸的参数,例如,要调大上文所述的微信图标符号的尺寸,只需把
<i class="fa-brands fa-weixin"></i>
拓展写为:
<i class="fa-brands fa-weixin fa-2x"></i>
即可得到加大尺寸的符号。如:
尺寸参数共有如下几阶,感兴趣的话可以自行尝试其效果:
fa-xs
fa-sm
fa-lg
fa-2x 至 fa-10x
转动
通过在符号名称中加入 fa-spin 就可以使符号变成动态的连贯转动效果,通过 fa-pulse 也可以变成 8 步旋转效果:
<i class="fa-solid fa-gear fa-spin"></i>
引用符下沉
在本文最开始使用的例子中,在引文块的最前面使用了如下代码,即可实现引用符下沉的效果:
<i class="fa-solid fa-quote-left fa-3x fa-pull-left"></i>
其中,
fa-quote-left 是前引号,
fa-3x 表示符号尺寸,
fa-pull-left 表示使符号下沉。
本主题引入为 Font Awesome Free 6.0