Font-Awesome
在搭建本博客时，在编辑页脚的相关链接时，想更换如下图标。但并未在img文件里找到相关的ico图标可用于替换。
看一下fork仓库的代码。原来是用代码画的图标，也借此机会了解到了Font Awesome，打开了新世界的大门。
何为Font-Awesome
经查询资料原作者用的是Font Awesome 图标，简言之:可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)
也借机了解一下FA的用法：
- fa-stack作为父,组合子元素生成的对象;可以使用规格参数
- fa-stack-2x 作为背景的栈,要大于显示图形的栈
- fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈
- fa-inverse 用来反转图标颜色,生成可见图标组
详细用法可参考https://blog.csdn.net/crper/article/details/46293295
CND引用AweSome(推荐)
只要把head内引用本地awesome的位置改下即可
1
<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
Font Awesome 中文网里面有各种各样的图标可以直接引用，肥肠的方便。网站上也有详细的教程。
但缺点也肥肠明显，就是图标库太少了，还在为了一个图标翻遍他的网站，不得不说，这是一件很费眼睛的工作， 但最要命的是:
绝大多数时候你无法找到想要的图标！最新的4.7.0版，也不过收录了675个图标。比如我想用的b站小电视的图标，就没有办法解决。于是只能找另一个办法。
IconFont
Iconfont——阿里巴巴矢量图标库，是阿里巴巴UED团队(花名： 阿里妈妈MUX)打造的矢量图标管理平台。
通过这个免费的工具，设计师不仅可以浏览下载(不可商用)大量优秀设计师的图标作品，还可以管理和展示自己设计的图标。是很多UI设计师日常工作的必备工具。
以下是我认为非常实用的几点功能：
- iconfont完全可以替代所有字体图标库，重要的还是国产的，网速没问题
- 可以通过css的样式改变其颜色(最霸气的理由）
- 相对于图片来说,具有更高的分辨率
- 这样的打包体积更小，更定制，以往，哪怕只用一个图标 ，也要下载整个图标库，太不环保了！
- 图标库庞大到感动，妈妈再也不用担心我找不到图标了，还有彩色图标可以用哦
iconfont使用方法
-
登录http://www.iconfont.cn/ 阿里巴巴矢量图标库，github或微博登录
-
先逛超市，看中了放进购物车，挑的差不多了，到购物车“添加到项目”，没有项目就新建一个。
有三种方法使用
unicode引用
unicode是字体在网页端最原始的应用方式。不支持多色图标，不好用。想看的参考iconfont官方代码应用
symbol引用
这是一种全新的使用方式，官方说这才是未来的主流，也是平台目前推荐的用法。因为我没用明白，有空研究下，埋个坑～iconfont官方代码应用
fontclass引用
我自己用的这种方式
生成fontclass代码
- 把上面
//at.alicdn.com/t/font_2364702_21qrdt921hz.css这样一段代码 在你的页面中引入：
1
<link rel="stylesheet" href="//at.alicdn.com/t/font_2364702_21qrdt921hz.css">
- voila！在页面中任何地方，像使用fomt-awesome那样欢快的使用iconfont吧！ 示例：使用上面那个icon-bilibili-fill-32图标：
1
<i class="iconfont icon-bilibili-fill-32"></i>
加入css样式
虽然在iconfont里可以改变字体大小颜色，但是！保存后并不生效，只有下载后才生效（不知道是不是官方的bug，希望后续可以改进。）也就意味着，想要通过引用代码的方式来使用图标，就只能使用最基本的图标，我陷入了深深的沉思。
冥思苦想良久，也没有找到合适的办法，突然一个后缀点醒了我，就是下面的这个.css，是不是说可以引入css样式表呢？这样css能用的属性，会不会这里也可以用？我他娘的真是个天才。搞起～
1
<link rel="stylesheet" href="//at.alicdn.com/t/font_2364702_21qrdt921hz.css">
经网上查阅资料，确实有人引用了style里的color属性。
1
<i class="iconfont icon-huodong" style="color:red"></i>
然后我加上字体大小，调试完成，是我想要的样子。（理论上来说css支持的样式这里都可以设置）
1
<i class="iconfont icon-csdn1 fa-stack-1x fa-inverse" style="font-size:34px"></i>
总结
其实最初只是想调整一个小小的图标，没想到搞了一晚上才解决，抱着“我就不信这么简单的问题我都搞不定的”心态，其实真的不难，主要的问题在于自己的基础知识不牢固，很多事情想通过多次调试来解决，其实首要的还是先理解代码，才能更高效的解决问题，以后还是要多多加油呀～
不过，睡觉前把困扰许久的问题解决，真的是一件开心的事情呢！
以上..
