font awesome

fontawesome是一款功能强大的图标字体库程序，它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。fontawesome包含人物、动物、建筑、商业、品牌等等各种主题丰富的图标符号，可以通过相应的语法添加在Markdown文档中，像Emoji一样配合文字使用。

功能特色：

一套字库,675个图标

FontAwesome是一种带有网页功能的象形文字语言，并收集在一个集合里。

不需要JavaScript支持

更少的兼容性问题，因为该字体不需要javascript

无限的扩展性

可缩放的矢量图形，每个图标在放大或者缩小的时候看起来都正常

完全开源免费

该字体是完全开源并且免费的，查看许可证.

CSS控制

可以轻松的用css来控制字体的颜色，大小，阴影等！

完美支持Retina屏幕

字体是矢量图，这意味着在高分辨率下也会完美显示。

良好的兼容性

最初是为Bootstrap而设计的，现在FontAwesome适用于所有框架。

怎么装点markdown文档：

准备工作

要在Markdown文档中输入FontAwesome，需要在文档中任意位置贴粘入如下语句（可以放在文档结尾处，以不影响直接在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"

其中最后一行是表示此文档需要导入FontAwesome最新版本5.0.13（截止至2018.06.11）的图标符号，前面的四行是用于将FontAwesome4.x版本的语句转化为5.0.13版本。这是因为在2017年年底发布的5.0版本中，对4.x版本的大量图标符号的名称进行了重写，加上此四行就可以同时使用4.x和5.x版本的语句。

插入符号

之后就可以直接插入各类FontAwesome符号了，其基础用法是：

<i?class="fa?fa-weixin-hrbzb"</i

这表示一个微信图标的符号。直接把它写入文档中即可在编译时得到如下效果：

微信和微博图标符号

获取符号名称

在?FontAwesome的符号列表中搜索，就可以得到不同的符号的写法，点击符号名称右侧的复制图标，就可以复制它：

获取人人图标符号

获取了常用的符号名称，就可以把它保存在TextExpander或LaunchBar的Snippets等缩写工具中，以备之后快速调用。

还有一个更简单的方法，LaunchBar中自带了一个?FontAwesomeIcons?的动作，可以在其中直接搜索FontAwesome符号的写法，具体步骤是：

通过缩写如?FONT?检索到?FontAwesomeIcons?动作，回车选择；

通过缩写检索目标符号，如?GOOGLE；

找到后按?→?方向键，在出现的列表中移动光标至右边标记为?HTML?的一行，按?&#8984;Command-C?复制，再在文档中贴粘。

LaunchBar中的FontAwesomeIcons?动作

由于目前这个动作还并未随FontAwesome5.0的发布一起更新，其中只包含了4.x中786个图标，且采用的是4.x版本的写法。这也就是在上文中需要加入将4.x版本转化为5.0版本的原因。

从此LaunchBar动作出复制出来的符号名称，包含了一个?aria-hidden="true"?的代码，它表示在让电脑朗读屏幕内容时，忽略掉此符号，对显示效果没有影响。如果你没有此需求，可保留此代码，也可以删掉。

修改符号格式

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

调节尺寸

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

<i?class="fa?fa-weixin-hrbzb"</i

拓展写为：

<i?class="fa?fa-weixin?fa-2x-hrbzb"</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-hrbzb"</i

其中，

fa-quote-left?是前引号，

fa-3x?表示符号尺寸，

fa-pull-left?表示使符号下沉。

引用符下沉

Tags:font awesome.