装饰 Markdown

利用 Font Awesome 提升 Markdown 的表现能力

Font Awesome 是一个字体和图标工具包,包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号,可以通过相应的语法添加在 Markdown 文档中,像 Emoji 一样配合文字使用。它提供了 Font Awesome Free 和 Font Awesome Pro 两个方案,前者可以免费使用,后者需要付费以使用更多图标。但实际上免费方案中就提供了上千个图标,足够日常使用。

下面将以常用的编辑器 VS code 为例,介绍在 Markdown 文档中使用 Font Awesome 的具体方法。

插入符号

我们可以直接插入各类 Font Awesome 符号了,下面以微信图标为例说明:

语法:<i class="fa fa-weixin"></i>

显示:

获取符号名称

Font Awesome 的符号列表中搜索,就可以得到不同的符号的写法,点击符号名称右侧的复制图标,就可以复制它:

修改符号格式

使用 Font Awesome 的另一个优点是,除了上述简单的符号调用,还可以对这些符号进行格式的修改,以实现更丰富的排版可能性。下面列举几个日常用得到的有趣格式。

调节尺寸

要调节符号的尺寸,只需对其名称加上尺寸的参数,例如,要调大上文所述的微信图标符号的尺寸,只需把

<i class="fa fa-weixin"></i>

改为

<i class="fa fa-weixin fa-2x"></i>

即可得到加大尺寸的符号

尺寸参数共有如下几阶,感兴趣的话可以自行尝试其效果:

  • fa-xs
  • fa-sm
  • fa-lg
  • fa-2xfa-10x

转动

通过在符号名称中加入 fa-spin 就可以使符号变成动态的连贯转动效果,通过 fa-pulse 也可以变成 (8) 型旋转效果:

  • <i class="fa fa-weixin fa-spin"></i> 显示为
  • <i class="fa fa- fa-pulse"></i>0 显示为

引用符下沉

在引文块的最前面使用了如下代码,即可实现引用符下沉的效果:

> <i class="fas fa-quote-left fa-3x fa-pull-left"></i> 早起的鸟儿有虫吃。

早起的鸟儿有虫吃。

其中,

  • fa-quote-left 是前引号,
  • fa-3x 表示符号尺寸,
  • fa-pull-left 表示使符号下沉。

更多用法

除此之外,Font Awesome 还有许多其它调节格式的语法,有兴趣的读者可在这个 Font Awesome 官方说明页面进行查阅:How to Use | Font Awesome

原文地址:https://www.cnblogs.com/q735613050/p/9956763.html