如何简单方便的用字体代替页面中常见常用的小图标小按钮（上）

一、前言

• 今天要学习的内容：今天主要是稍微总结一下，页面中如何用字体代替图片，省事，省时，方便，实用！
• 小苏啰嗦：人都是有惰性的。真的。刚开始我们有一个经验丰富的美工，加上我们关系又非常好，以至于每次我都是等着她把设计图给我，我才开始码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许可协议许可. 】

使用优点：

1. 无需依赖js库；
2. 可以无限放大缩小；
3. css自由控制大小，颜色等；
4. 分辨率高；
5. 兼容性好；
6. 等等等等；

引用方法：

1. 直接引用MaxCDN提供的：<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2. 下载后直接引用css：<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
3. 第三种比较适合大神，这里就不说了。

使用方法：

1. 只需要使用css前缀fa,再加上图标名称，比如：<a class='fa fa-search'>搜索</a>
2. 放大图标：fa-2x(两倍大小),fa-3x,fa-4x,fa-5x;这样的话图标可以成倍放大，也可以直接font-size写自己需要的大小；
3. 图标对齐：fa-fw 这样的话用到的图标宽度就会对齐了。（这个在竖形列表中很有用）
4. 图标旋转：fa-spin  fa-pulse ;最适用的就是刷新，加载等图标了。这样的话不用加gif动画了，很实用；
5. 太多了，大家可以直接看官网，非常详细；

详细代码

• 上图左边的html代码如下，很轻松的就实现了，而且hover,click颜色都可以直接设置，不像以前这样的话会用到三张图片去替换，麻烦：

<div class="left">
        <ul class="cleanfloat">
            <li><span class="fa fa-home fa-fw"></span>首页</li>
            <li class="on1"><span class="fa fa-home fa-fw"></span>首页</li>
            <li><span class="fa fa-user-circle fa-fw"></span>客户</li>
            <li><span class="fa fa-user-circle fa-fw"></span>客户</li>
            <li class="on2"><span class="fa fa-bell fa-fw"></span>消息</li>
            <li><span class="fa fa-bell fa-fw"></span>消息</li>
            <li><span class="fa fa-bar-chart fa-fw"></span>报表</li>
            <li><span class="fa fa-bar-chart fa-fw"></span>报表</li>
            <li><span class="fa fa-pencil fa-fw"></span>应用</li>
            <li><span class="fa fa-pencil fa-fw"></span>应用</li>    
            <li><span class="fa fa-cog fa-fw"></span>设置</li>
            <li><span class="fa fa-cog fa-fw"></span>设置</li>
        </ul>
    </div>

• 上图中图片右上方的实现html代码如下：

<ul class="cleanfloat">
    <li class="onC1"><a class="fa fa-search"></a>查询</li>
    <li><a class="fa fa-refresh fa-spin"></a>刷新</li>
    <li><a class="fa fa-share-alt"></a>分享</li>
    <li><a class="fa fa-sign-out"></a>注销</li>
    <li><a class="fa fa-power-off"></a>退出</li>
</ul>

再写就感觉有点啰嗦了。个人觉得这个用起来简单易上手，真的是很实用的！

三、总结

今天只是简单的给小白了解一下这个知识，个人觉得是很实用的，至少不用总是难为ui妹子设计小图标了。而且大小和颜色也可以自己控制。好像我这废话有点多。希望大家对我进行批评与指教！

本文只是告诉大家一些小的图标可以不用ui妹子去设计了，但是一些色调呀排版呀，程序猿跟ui妹子比起来，还是会差距大的不要不要的。

ps:其实为了总结这个，花了一天的时间，画页面，调样式。但是真到写的时候，竟然写的东西太少，也不知道写些什么，唉，真的是有点挫败感！

ps：上次写的一篇关于css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星） 被很多人直接搬走了，也没有注明出处，这有点不厚道了，关键是有的地方显示的发表时间竟然还在我这个时间之前，真的是无语了！我很欢迎大家转载，但是请保留申明和出处，尊重每个人的劳动成果！