更丰富的符号工具包 Font Awesome
Posted lfri
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了更丰富的符号工具包 Font Awesome相关的知识，希望对你有一定的参考价值。
我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注，例如使用 Emoji。然而 Emoji 在这方面仍然有存在一些不足，如：
- 颜色与文字风格不统一，
- 在不同系统的平台上显示不统一，
- 种类有限，很多时候找不到合适的表情。
这时，可以在文档写作时引入另一个更丰富的符号工具包 Font Awesome。
简介
Font Awesome 是一个字体和图标工具包，包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号，可以通过相应的语法添加在 Markdown 文档中，像 Emoji 一样配合文字使用。它提供了 Font Awesome Free 和 Font Awesome Pro 两个方案，前者可以免费使用，后者需要付费以使用更多图标。但实际上免费方案中就提供了上千个图标，足够日常使用。
准备工作
要在 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">
我自己注册了一个免费的，有些图标是用不了的。
插入符号
其基础用法是 :
<i class="fa fa-weixin"></i> <i class="fa fa-weibo"></i>
“fa” 为前缀，“weixin” 为图标名称
fa版本5中不推荐使用 该前缀。新的默认值是fas实体样式和fab品牌样式。
更多的符号可以在 Font Awesome 的符号列表中搜索。
修改样式
除了简单的调用，还能调整大小、旋转、排列、层叠等。
(i) 调节尺寸
要调节符号的尺寸，只需对其名称加上尺寸的参数，例如，要调大上文所述的微信图标符号的尺寸，只需把
<i class="fa fa-weixin"></i>
拓展写为：
<i class="fa fa-weixin fa-2x"></i>
尺寸参数共有如下几阶，感兴趣的话可以自行尝试其效果：
fa-xsfa-smfa-lgfa-2x至fa-10x
(ii) 动画
通过在符号名称中加入 fa-spin 就可以使符号变成动态的连贯转动效果，通过 fa-pulse 也可以变成 8 步旋转效果：
例如：
<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-2x fa-pulse"></i>
(iii) 更多用法
除此之外，Font Awesome 还有许多其它调节格式的语法，有兴趣的读者可在这个 Font Awesome 官方说明页面进行查阅：
参考链接：https://sspai.com/flipboard/post/45217
以上是关于更丰富的符号工具包 Font Awesome的主要内容，如果未能解决你的问题，请参考以下文章
使用font awesome制作网站常用社交工具联系方式图标
Ten——tornado操作之使用 Bootstrap 前端框架美化项目（Bootstrap的使用及font- awesome插件的使用—图标集和工具包）+静态文件的处理
Ten——tornado操作之使用 Bootstrap 前端框架美化项目（Bootstrap的使用及font- awesome插件的使用—图标集和工具包）+静态文件的处理