font awesome是一款功能强大的图标字体库程序,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。font awesome包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号,可以通过相应的语法添加在 Markdown 文档中,像 Emoji 一样配合文字使用。
功能特色:
一套字库, 675个图标
FontAwesome是一种带有网页功能的象形文字语言,并收集在一个集合里。
不需要 JavaScript 支持
更少的兼容性问题,因为该字体不需要javascript
无限的扩展性
可缩放的矢量图形,每个图标在放大或者缩小的时候看起来都正常
完全开源免费
该字体是完全开源并且免费的,查看许可证.
CSS 控制
可以轻松的用css来控制字体的颜色,大小,阴影等!
完美支持Retina屏幕
字体是矢量图,这意味着在高分辨率下也会完美显示。
良好的兼容性
最初是为Bootstrap而设计的,现在Font Awesome适用于所有框架。
怎么装点markdown文档:
准备工作
要在 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 表示使符号下沉。
引用符下沉