# 巧用 Font Awesome 装点 Markdown 文档
原作者：[契丹神童](https://sspai.com/u/KhitanKid/updates) ----如有侵权请联系删除
## 图形符号在 Markdown 文档中的应用
使用 Markdown 写文档是件赏心悦目的事情，借此可以专注于内容而非格式。只在最后轻松导出，即可收割一份美观的文档。
相关阅读：[想学 Markdown？这篇文章帮你快速上手](https://sspai.com/post/43866)
然而，我时常想要在此类文档中通过一些**图形符号**来表达更丰富的含义或是对段落进行标注，例如使用 Emoji。然而 Emoji 在这方面仍然有存在一些不足，如：
* 颜色与文字风格不统一，
* 在不同系统的平台上显示不统一，
* 种类有限，很多时候找不到合适的表情。
这时，可以在文档写作时引入另一个更丰富的符号工具包 **Font Awesome** 。例如下图是我的一则笔记：
在文档中使用 Font Awesome
[Font Awesome](https://sspai.com/link?target=https%3A%2F%2Ffontawesome.com%2F) 是一个字体和图标工具包，包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号，可以通过相应的语法添加在 Markdown 文档中，像 Emoji 一样配合文字使用。它提供了 Font Awesome Free 和 Font Awesome Pro 两个方案，前者可以免费使用，后者需要付费以使用更多图标。但实际上免费方案中就提供了上千个图标，足够日常使用。
下面将以常用的编辑器 **MWeb** 为例，介绍在 Markdown 文档中使用 Font Awesome 的具体方法。
## 准备工作
要在 Markdown 文档中输入 Font Awesome，需要在文档中任意位置贴粘入如下语句（可以放在文档结尾处，以不影响直接在 Markdown 文档中的阅读）：
```
```
其中最后一行是表示此文档需要导入 Font Awesome 最新版本 5.0.13（截止至 2018.06.11）的图标符号，前面的四行是用于将 Font Awesome 4.x 版本的语句转化为 5.0.13 版本。这是因为在 2017 年年底发布的 5.0 版本中，对 4.x 版本的大量图标符号的名称进行了重写，加上此四行就可以同时使用 4.x 和 5.x 版本的语句。
## 插入符号
之后就可以直接插入各类 Font Awesome 符号了，其基础用法是：
```
```
这表示一个微信图标的符号。直接把它写入文档中即可在编译时得到如下效果：
微信和微博图标符号
## 获取符号名称
在 [Font Awesome 的符号列表](https://sspai.com/link?target=https%3A%2F%2Ffontawesome.com%2Ficons%3Fd%3Dgallery%26m%3Dfree)中搜索，就可以得到不同的符号的写法，点击符号名称右侧的复制图标，就可以复制它：
获取人人图标符号
获取了常用的符号名称，就可以把它保存在 TextExpander 或 LaunchBar 的 Snippets 等缩写工具中，以备之后快速调用。
还有一个更简单的方法，LaunchBar 中自带了一个 **Font Awesome Icons** 的动作，可以在其中直接搜索 Font Awesome 符号的写法，具体步骤是：
1. 通过缩写如 `FONT` 检索到 **Font Awesome Icons** 动作，回车选择；
2. 通过缩写检索目标符号，如 `GOOGLE`；
3. 找到后按 `→` 方向键，在出现的列表中移动光标至右边标记为 **HTML** 的一行，按 `⌘Command-C` 复制，再在文档中贴粘。
LaunchBar 中的 Font Awesome Icons 动作
由于目前这个动作还并未随 Font Awesome 5.0 的发布一起更新，其中只包含了 4.x 中 786 个图标，且采用的是 4.x 版本的写法。这也就是在上文中需要加入将 4.x 版本转化为 5.0 版本的原因。
从此 LaunchBar 动作出复制出来的符号名称，包含了一个 `aria-hidden="true"` 的代码，它表示在让电脑朗读屏幕内容时，忽略掉此符号，对显示效果没有影响。如果你没有此需求，可保留此代码，也可以删掉。
## 修改符号格式
使用 Font Awesome 的另一个优点是，除了上述简单的符号调用，还可以对这些符号进行格式的修改，以实现更丰富的排版可能性。下面列举几个日常用得到的有趣格式。
### 调节尺寸
要调节符号的尺寸，只需对其名称加上尺寸的参数，例如，要调大上文所述的微信图标符号的尺寸，只需把
```
```
拓展写为：
```
```
即可得到加大尺寸的符号。
放大的微信图标
尺寸参数共有如下几阶，感兴趣的话可以自行尝试其效果：
* `fa-xs`
* `fa-sm`
* `fa-lg`
* `fa-2x` 至 `fa-10x`
### 转动
通过在符号名称中加入 `fa-spin` 就可以使符号变成动态的连贯转动效果，通过 `fa-pulse` 也可以变成 8 步旋转效果：
转动的符号
### 引用符下沉
在本文最开始使用的例子中，在引文块的最前面使用了如下代码，即可实现引用符下沉的效果：
```
>
```
其中，
* `fa-quote-left` 是前引号，
* `fa-3x` 表示符号尺寸，
* `fa-pull-left` 表示使符号下沉。
引用符下沉
### 更多用法
除此之外，Font Awesome 还有许多其它调节格式的语法，有兴趣的读者可在这个 Font Awesome 官方说明页面进行查阅：
[How to Use | Font Awesome](https://sspai.com/link?target=https%3A%2F%2Ffontawesome.com%2Fhow-to-use)
## 原理简介
最后，简要介绍一下这个用法的原理。
虽然 Markdown 的优点在于简约，同时也局限于简约。
例如要使两张图片并排显示，Markdown 中并不存在相应的语法。好在我们可以使用 HTML 语法来拓展它。如：
```
```
这样，上面的三张 png 图片就可以并排显示在同一行中。同理，如果要三张图片并排显示，则将第一行中的 `"half"` 替换为 `"third"`。如下图所示：
并列排列图片
再例如要隐藏文档中的某一片段，可以在其前后分别加上两行：
```
```
即可以用 HTML 中注释的方式把这两行中间的内容隐藏起来。
Markdown 之所以可以通过使用 HTML 语法来进行拓展，是因为在把 Markdown 文档编译成 HTML 文档的过程中，这些 HTML 的语句直接写在了 HTML 文档中，可以对其内容格示进行直接调节。
借助这个特点，可以大大拓展 Markdown 文档对内容的操作性。本文就是通过这个思路，实现在 Markdown 文档中输入 Font Awesome 的各类图标。
## 支持的常见编辑器
除了 MWeb，很多纯文本编辑器如：
* **Ulysses**
* **Byword**
* **Day One**
* **Day One Classic**
* **nvALT**
* **Sublime Text**
* **Visual Studio Code**
也都支持本文介绍的方法。
但在 Ulysses 中使用本文介绍的方法时，还需要在最开始加入文档的代码块的每一行前加上 `~~` 标示出来，而在行内插入符号时，在其代码前后各加一个波浪号 `~` 即可：
在 Ulysses 中使用 Font Awesome
在写 Markdown 文档时使用 Font Awesome，则可以使生成的文档生动不少，使标示的内容更加醒目。如果你是 Markdown 的使用者，则不妨一试。