使用 Font Awesome

插入符号

之后就可以直接插入各类 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

评论区 0