用 Font Awesome 给 Markdown 文档加上生动的表情符号
source link: http://sspai.com/post/45217?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
图形符号在 Markdown 文档中的应用
使用 Markdown 写文档是件赏心悦目的事情，借此可以专注于内容而非格式。只在最后轻松导出，即可收割一份美观的文档。
相关阅读： 想学 Markdown？这篇文章帮你快速上手
然而，我时常想要在此类文档中通过一些 图形符号 来表达更丰富的含义或是对段落进行标注，例如使用 Emoji。然而 Emoji 在这方面仍然有存在一些不足，如：
- 颜色与文字风格不统一，
- 在不同系统的平台上显示不统一，
- 种类有限，很多时候找不到合适的表情。
这时，可以在文档写作时引入另一个更丰富的符号工具包 Font Awesome 。例如下图是我的一则笔记：
在文档中使用 Font Awesome
Font Awesome 是一个字体和图标工具包，包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号，可以通过相应的语法添加在 Markdown 文档中，像 Emoji 一样配合文字使用。它提供了 Font Awesome Free 和 Font Awesome Pro 两个方案，前者可以免费使用，后者需要付费以使用更多图标。但实际上免费方案中就提供了上千个图标，足够日常使用。
下面将以常用的编辑器 MWeb 为例，介绍在 Markdown 文档中使用 Font Awesome 的具体方法。
准备工作
要在 Markdown 文档中输入 Font Awesome，需要在文档中任意位置贴粘入如下语句（可以放在文档结尾处，以不影响直接在 Markdown 文档中的阅读）：
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script>
</head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
其中最后一行是表示此文档需要导入 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 符号了，其基础用法是：
<i class="fa fa-weixin"></i>
这表示一个微信图标的符号。直接把它写入文档中即可在编译时得到如下效果：
微信和微博图标符号
获取符号名称
在 Font Awesome 的符号列表 中搜索，就可以得到不同的符号的写法，点击符号名称右侧的复制图标，就可以复制它：
获取人人图标符号
获取了常用的符号名称，就可以把它保存在 TextExpander 或 LaunchBar 的 Snippets 等缩写工具中，以备之后快速调用。
还有一个更简单的方法，LaunchBar 中自带了一个 Font Awesome Icons 的动作，可以在其中直接搜索 Font Awesome 符号的写法，具体步骤是：
- 通过缩写如
FONT检索到 Font Awesome Icons 动作，回车选择； - 通过缩写检索目标符号，如
GOOGLE； - 找到后按
→方向键，在出现的列表中移动光标至右边标记为 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 的另一个优点是，除了上述简单的符号调用，还可以对这些符号进行格式的修改，以实现更丰富的排版可能性。下面列举几个日常用得到的有趣格式。
调节尺寸
要调节符号的尺寸，只需对其名称加上尺寸的参数，例如，要调大上文所述的微信图标符号的尺寸，只需把
<i class="fa fa-weixin"></i>
拓展写为：
<i class="fa fa-weixin fa-2x"></i>
即可得到加大尺寸的符号。
放大的微信图标
尺寸参数共有如下几阶，感兴趣的话可以自行尝试其效果：
-
fa-xs -
fa-sm -
fa-lg -
fa-2x至fa-10x
转动
通过在符号名称中加入 fa-spin 就可以使符号变成动态的连贯转动效果，通过 fa-pulse 也可以变成 8 步旋转效果：
转动的符号
引用符下沉
在本文最开始使用的例子中，在引文块的最前面使用了如下代码，即可实现引用符下沉的效果：
> <i class="fas fa-quote-left fa-3x fa-pull-left"></i>
其中，
-
fa-quote-left是前引号，
-
fa-3x表示符号尺寸，
-
fa-pull-left表示使符号下沉。
引用符下沉
更多用法
除此之外，Font Awesome 还有许多其它调节格式的语法，有兴趣的读者可在这个 Font Awesome 官方说明页面进行查阅：
原理简介
最后，简要介绍一下这个用法的原理。
虽然 Markdown 的优点在于简约，同时也局限于简约。
例如要使两张图片并排显示，Markdown 中并不存在相应的语法。好在我们可以使用 HTML 语法来拓展它。如：
<figure class="half">
<img src="path/to/img1.png" width="265px">
<img src="path/to/img2.png" width="265px">
</figure>
这样，上面的三张 png 图片就可以并排显示在同一行中。同理，如果要三张图片并排显示，则将第一行中的 "half" 替换为 "third" 。如下图所示：
并列排列图片
再例如要隐藏文档中的某一片段，可以在其前后分别加上两行：
<!--- （要隐藏的内容） -->
即可以用 HTML 中注释的方式把这两行中间的内容隐藏起来。
Markdown 之所以可以通过使用 HTML 语法来进行拓展，是因为在把 Markdown 文档编译成 HTML 文档的过程中，这些 HTML 的语句直接写在了 HTML 文档中，可以对其内容格示进行直接调节。
借助这个特点，可以大大拓展 Markdown 文档对内容的操作性。本文就是通过这个思路，实现在 Markdown 文档中输入 Font Awesome 的各类图标。
支持的常见编辑器
除了 MWeb，很多纯文本编辑器如：
- Ulysses
- Byword
- nvALT
- Sublime Text
- Visual Studio Code
也都支持本文介绍的方法。
但在 Ulysses 中使用本文介绍的方法时，还需要在最开始加入文档的代码块的每一行前加上 ~~ 标示出来，而在行内插入符号时，在其代码前后各加一个波浪号 ~ 即可：
在 Ulysses 中使用 Font Awesome
在写 Markdown 文档时使用 Font Awesome，则可以使生成的文档生动不少，使标示的内容更加醒目。如果你是 Markdown 的使用者，则不妨一试。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK