（一）：引言
今天因为个人博客想加入网易云音乐的主页链接。于是对博客的JS文件粗略修改。在百度了一些资料后。还是有些许收获，根据这篇文章成功完成了需求。还加了知乎 和 网站主页的 图标链接
（二）：什么是 Font Awesome？
Font Awesome 是一款开源的字体图标库，拥有大量简洁优雅的图标(Version 4.3.0已经拥有519个图标)，是一款强大、丰富、简单、好用的字体图标库。在项目中使用Font Awesome可以大大提高项目的进度。
网页小图标处处可见，如果网页没有了小图标的点缀，那么在用户体验上就可能失去了一种优雅。想想看，下面的小图标，我们做设计是不是会经常会注意到？(分别选自QQ空间，豆瓣，淘宝)
icon 作为提高用户体验的重要手段，在网页设计中早已被广泛使用。但是在CSS3之前，多使用传统的“CSS + 图片”的方式来制作这些icon，即每个网站制定一套icon，放到透明的PNG图像上，然后通过CSS进行定位显示icon。但大多数的网页都要用到各种透明小图标，且要兼容各个浏览器，也可能会有多个尺寸，这样我们就要将这些小图标分别输出多种尺寸、颜色和文件格式。这种方法效率低，可移植性差，也不利于设计流程的优化。
还好，CSS3的出现为我们提供了解决的办法。CSS3的自定义字体(@font-face)已经被各大浏览器支持，那么对于网站中用到的icon，我们就可以使用font-icon来代替。font-icon(fong-icon这里先只简单的介绍下)通过字体编辑软件，将矢量的icon放到字体文件中，用CSS3的@font-face引入字体文件实现icon在网页上的展示。这种方法实现的icon缩放不会失真，更容易编辑和维护，尺寸、颜色也可以方便的用CSS来控制，这些都避免我们之前要对icon多次输出，有助于提高我们的设计效率。
Font Awesome就是这样的一款font-icon库，而且为我们提供了其它一些方便的特性，比如icon的一些简单动效、icon的叠加以生成新图标以及对bootstrap的支持等。
（三）：如何使用Font Awesome
使用Font Awesome非常简单，引入图标库后，在其网站上找到我们想要用的图标放入网页就可以了。
1. 引入
你可以通过CDN引入:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
也可以通过下载[Font Awesome][fontawesome]的源码，将源码放到自己的网页项目中引入:
<link rel="stylesheet" href="path/to/css/font-awesome.min.css">
注意：Font Awesome的font文件夹要跟其存放.css文件的文件夹在同一个目录下。*
引入Font Awesome之后，我们就可以在Font Awesome的icons界面搜索我们想要的图标，找到我们想要的图标后，例如这个：
通过在标签加上类名 fa 以及fa-icon名(这个例子中是fa-bed)，就可以将图标引入网页，如：<i class="fa fa-bed"></>或<span class="fa fa-bed">。(Font Awesome被设计成跟内联的标签一起使用。)
2. 控制icon
通过类名fa和fa-icon名即可在页面中使用Font Awesome。而且Font Awesome的控制也很方便操作。下面是常见的一些操作。
- 尺寸:
fa-lg, fa-2x, fa-3x, fa-4x, fa-5x 分别是将icon扩大到原来的133%, 2倍，3倍，4倍和5倍，如图：
- 固定宽度：
通过fa-fw给icon一个固定宽度。当要使不同宽度的icon对齐时很管用，特别是在设计导航组和列表组的时候，如图：
- 用于列表的 icon：
用fa-ul和fa-li可以方便的替换掉ul列表的默认样式，如图：
- 边框和排版：
用fa-border，pull-right, pull-left 方便的排列用于引用或文字开头的图标(首字下沉效果)，如图：
- 动画：
fa-spin和fa-pulse可以让图标旋转，两个有区别，第一个应该是不间断的旋转，第二个是以8步动画旋转的，可以自己实现看下，我这里可能描述的不准确。经常跟fa fa-spinner, fa fa-refresh, fa fa-cog一起使用。
- 旋转和翻转：
fa-rotate-90, fa-rotate-180, fa-rotate-270分别让icon旋转 90°，180°， 270°；fa-flip-horizontal, fa-flip-vertical分别让icon水平翻转和垂直翻转，如图：
- 组合：
组合icon要在父级标签加上fa-stack类，正常大小的图标用fa-stack-1x, 2倍正常大小的用fa-stack-2x(即用来做背景icon), 可以用fa-inverse翻转icon颜色，叠加的顺序就是标签的顺序，在父级添加fa-lg这类控制icon大小的类可以控制整个组合图标的大小，如图:
- 配合Bootstrap使用：
Font Awesome可以很好的跟Bootstrap一起工作，使用方法跟Bootstrap的Glyphicons也基本相同，但是可以控制的项更多了，下图是Font Awesome在Bootstrap组件中的效果：
