我们经常在项目中看到各式各样精美的按钮图标，其中绿色部分就是今天要提到的图标，例如：
但是在自己的项目中制作的按钮图标往往不是很称心如意，那么怎么自己有选择地做出精美的按钮图标呢？下面是我在项目实际开发中总结的三种解决办法。
第一步：登录阿里巴巴矢量图标库（需要注册github账号）：http://www.iconfont.cn/，点击你想要搜索的图标名称，例如：添加、删除：
第二步：选中你想要的图标，出现一个购物车的图标，单击它，这个图标就进入了购物车中：
单击右上角的购物车，出现下面的界面：
第三步：单击添加至项目（并命名），这时候这个图标就添加到了你的用户的项目中：
第四步：点击下载到本地，下载的文件包括demo的html和css文件、iconfont的css、js以及各种字体文件。这个文件的结构如下所示。
在上面的文件中，已经给我们列出了三种方式的demo：Unicode方式、Fontclass方式以及Symbol方式。
二、使用介绍
那么怎么使用这些资源呢？
1、Fontclass方式
在你所在的项目中，将刚才下载的图标资源放置到工程目录下，在jsp文件中引入css文件：
<link rel="stylesheet"href="${pageContext.request.contextPath}/icon-font/iconfont.css">
我们来看一下这个css文件的内容：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1531027630144');/* IE9*/
src: url('iconfont.eot?t=1531027630144#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1531027630144')format('truetype'), /* chrome, firefox, opera, Safari,Android, iOS 4.2+*/
url('iconfont.svg?t=1531027630144#iconfont') format('svg'); /* iOS 4.1- */
}
font-family:"iconfont"!important;
font-size:14px;
font-style:normal;
margin-left:-7px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#2fff17;
font-weight:bold;
}
.icon-back:before { content: "\e64f"; }
.icon-save:before { content: "\e688"; }
.icon-update:before { content: "\e6f5"; }
.icon-query1:before { content: "\e6f0"; }
.icon-add:before { content: "\e665"; }
.icon-remove:before { content: "\e647"; }
.icon-uncheck:before { content: "\e815"; }
.icon-check:before { content: "\e816"; }
该文件分为三个部分：@font-face和.iconfont以及.icon-xxx:before. icon-back:before用于引入图标所需要的资源；.iconfont则是设置图标的样式；.icon-back则是引入unicode编码。在使用时，我们只需要将unicode编码所在的类名添加至i标签的类名中：
<i class="icon iconfont icon-save"></i>
相应的图标的类名我们可以在阿里巴巴图标库的“我的项目”中可以找到：
如果你觉得这个类名不规范，那么你可以自己在iconfont.css文件中将其修改为你想要的类名，然后在引用时，只需要将你修改的类名作为i标签class的一部分即可：
<i class="icon iconfont 你在iconfont.css文件中修改的类名（去除:before）"></i>
2）FontClass方式的优点
FontClass是Unicode使用方式的一种变种，主要是解决Unicode书写不直观，语意不明确的问题。与Unicode使用方式相比，具有如下特点：
· 兼容性良好，支持ie8+，及所有现代浏览器
· 相比于Unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
· 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用即可
· 因为本质上还是使用的字体，所以多色图标还是不支持
3）如何设置FontClass方式的图标颜色呢？
由于这种方式从本质上讲还是字体，因此设置字体颜色就能实现图标的颜色，你只需要在iconfont.css文件中的.iconfont类中添加你需要的color样式即可。
2、Unicode方式
a) 拷贝项目下面生成的font-face
@font-face { font-family : 'iconfont' ; src : url('iconfont.eot') ; src : url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg') ; }b) 定义使用iconfont的样式
.iconfont { font-family : "iconfont" !important ; font-size : 16px ; font-style : normal ; -webkit-font-smoothing : antialiased ; -webkit-text-stroke-width : 0.2px ; -moz-osx-font-smoothing : grayscale ; }c) 挑选相应图标并获取字体编码，应用于页面
< i class ="iconfont"> 3 </ i >如果你已经在项目中引入了iconfont.css文件，那么就不需要重复上面的步骤了，因为iconfont.css文件已经包括了上面的所需的全部资源。直接在项目中插入 <i class="iconfont"></i>即可。字体编码你可以在阿里巴巴图标库中找到：
2）Unicode是字体在网页端最原始的应用方式，优点是：
兼容性最好，支持ie6+，及所有现代浏览器
支持按字体的方式去动态调整图标大小，颜色等等（设置颜色的方式同上）
不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色
注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式
3、Symbol方式
1）使用方法：
a) 引入项目下面生成的iconfont.js
<script src="./iconfont.js"></script>
b)在iconfont.css中 加入通用css代码（引入一次就行），引入iconfont.css文件
.icon {
width: 1em; height:1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
c) 挑选相应图标并获取类名，应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
2）Symbol方式特点
支持多色图标了，不再受单色限制，支持平台图标的颜色
通过一些技巧，支持像字体那样，通过font-size,color来调整样式（对于前两种也是同样适用的，fontsize改变大小，color改变颜色）
兼容性较差，支持 ie9+，及现代浏览器
浏览器渲染svg的性能一般，还不如png