一、前言
- 今天要学习的内容：今天主要是稍微总结一下，页面中如何用字体代替图片，省事，省时，方便，实用！
- 小苏啰嗦：人都是有惰性的。真的。刚开始我们有一个经验丰富的美工，加上我们关系又非常好，以至于每次我都是等着她把设计图给我，我才开始码html。遇到图片的地方，会切的就自己切了，不会的，就直接让美工切图给我。成了一个不动脑子的码农！现在，美工换人了，新的美工太忙了。加上可能对我们前端交互不熟悉，现在原型图出来，我能不找美工就不找美工。自己动手！呵呵。
二、正文
- 如果下面两张图（右击图片-在新窗口打开图片，可以看到大图，更清晰），除了文字，上面的图片你平时是怎么做的？如果也是用图片代替的，那么今天你就会学到新技能；如果你不是用图片，好吧，这篇文章对你来说out了。你可以不用往下看啦。哈哈！
上面图片中用到的就是Font Awesome的矢量图标，它可以直接用CSS对它们进行大小、颜色、阴影或者其它任何支持的效果进行更改。主要概括如下：
- 我们为什么要使用图标？
图标可以传送大量信息，帮助人们语义化理解所看到的东西，现在我们出去看到各种建筑物都是直接用图标表示，而不是用文字，图标能更形象化的去表达所想表达的意思。所以说使用图标是非常重要的。如果你做的网站全部是用文字，而没有一些图标去衬托的话，总感觉会缺少一些东西，那就是美感。
- Font Awesome是什么？
Font Awesome是一套图标字体，主要目的是和Bootstrap搭配使用，但是我们也是可以直接使用的。是一款基于css框架的网页字体图标库，【完全免费】。
ps:对于【完全免费】这一词，博客园园友 rvalue对我的进行了指点（非常感谢这位大神）：
【Font Awesome字体根据SIL Open Font License进行许可;
Font Awesome的CSS/LESS/SASS等代码是根据MIT License许可的;
Font Awesome的文档根据CC BY 3.0许可协议许可. 】
使用优点：
- 无需依赖js库；
- 可以无限放大缩小；
- css自由控制大小，颜色等；
- 分辨率高；
- 兼容性好；
- 等等等等；
引用方法：
- 直接引用MaxCDN提供的：
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> - 下载后直接引用css：
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css"> - 第三种比较适合大神，这里就不说了。
使用方法：
- 只需要使用css前缀fa,再加上图标名称，比如：<a class='fa fa-search'>搜索</a>
- 放大图标：fa-2x(两倍大小),fa-3x,fa-4x,fa-5x;这样的话图标可以成倍放大，也可以直接font-size写自己需要的大小；
- 图标对齐：fa-fw 这样的话用到的图标宽度就会对齐了。（这个在竖形列表中很有用）
- 图标旋转：fa-spin fa-pulse ;最适用的就是刷新，加载等图标了。这样的话不用加gif动画了，很实用；
- 太多了，大家可以直接看官网，非常详细；
详细代码
- 上图左边的html代码如下，很轻松的就实现了，而且hover,click颜色都可以直接设置，不像以前这样的话会用到三张图片去替换，麻烦：
1 <div class="left"> 2 <ul class="cleanfloat"> 3 <li><span class="fa fa-home fa-fw"></span>首页</li> 4 <li class="on1"><span class="fa fa-home fa-fw"></span>首页</li> 5 <li><span class="fa fa-user-circle fa-fw"></span>客户</li> 6 <li><span class="fa fa-user-circle fa-fw"></span>客户</li> 7 <li class="on2"><span class="fa fa-bell fa-fw"></span>消息</li> 8 <li><span class="fa fa-bell fa-fw"></span>消息</li> 9 <li><span class="fa fa-bar-chart fa-fw"></span>报表</li> 10 <li><span class="fa fa-bar-chart fa-fw"></span>报表</li> 11 <li><span class="fa fa-pencil fa-fw"></span>应用</li> 12 <li><span class="fa fa-pencil fa-fw"></span>应用</li> 13 <li><span class="fa fa-cog fa-fw"></span>设置</li> 14 <li><span class="fa fa-cog fa-fw"></span>设置</li> 15 </ul> 16 </div>
- 上图中图片右上方的实现html代码如下：
1 <ul class="cleanfloat"> 2 <li class="onC1"><a class="fa fa-search"></a>查询</li> 3 <li><a class="fa fa-refresh fa-spin"></a>刷新</li> 4 <li><a class="fa fa-share-alt"></a>分享</li> 5 <li><a class="fa fa-sign-out"></a>注销</li> 6 <li><a class="fa fa-power-off"></a>退出</li> 7 </ul>
再写就感觉有点啰嗦了。个人觉得这个用起来简单易上手，真的是很实用的！
三、总结
今天只是简单的给小白了解一下这个知识，个人觉得是很实用的，至少不用总是难为ui妹子设计小图标了。而且大小和颜色也可以自己控制。好像我这废话有点多。希望大家对我进行批评与指教！
本文只是告诉大家一些小的图标可以不用ui妹子去设计了，但是一些色调呀排版呀，程序猿跟ui妹子比起来，还是会差距大的不要不要的。
ps:其实为了总结这个，花了一天的时间，画页面，调样式。但是真到写的时候，竟然写的东西太少，也不知道写些什么，唉，真的是有点挫败感！
ps：上次写的一篇关于css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星） 被很多人直接搬走了，也没有注明出处，这有点不厚道了，关键是有的地方显示的发表时间竟然还在我这个时间之前，真的是无语了！我很欢迎大家转载，但是请保留申明和出处，尊重每个人的劳动成果！