先说一下优点：
1/图标矢量化，不用担心失真问题
2/本质上是字体，可以用css控制图标大小/颜色/阴影等
3/图标丰富，也可自定义上传
iconfont网站地址
注册这里就不说了，网上有很多资料讲解，也很简单，我就自己作为初学者感觉绕的地方说说。
一/ 如何下载iconfont图标
首先将自己看中的图标加入购物车——进入购物车——选择“添加至项目”（如果没有项目可以新建一个）——进入图标管理界面
将下载的文件解压缩后，有如下文件
其中，demo_fontclass.html是对“font-class”的使用说明
demo_symbol.html是对“symbol”的使用说明
demo_unicode.html是对“unicode”的使用说明
大家可以下载查看，很详细，我下面将这三种用法及注意事项说一下
二/ “font-class”的使用（单色图标建议用这个，书写简单直观）
2.1.1.将下载的“iconfont.css”文件（或整个下载的文件）放入你的项目中，并引入需要该css文件的html文件中，例如
<link rel="stylesheet" href="css/iconfont.css">
2.1.2.选择相应图标并获取类名，应用于页面
<i class="iconfont icon-xxx"></i>
（“iconfont"是你项目下的font-family。可以通过“编辑项目”查看并修改，默认是"iconfont”。font-class和unicode方式使用小图标时一定要加这个claa类名）
2.2.我在项目中的使用
html代码：
<li class="footer-home"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>首页</li><li class="footer-classify"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>分类</li><li class="footer-shopping"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>购物车</li><li class="footer-my"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>我的</li>
css样式：
.wrap-footer ul li {display: inline-block;position: relative;width: 23%;height: 100%;font-size: 14px;font-size: 14px;color: #616161;text-align: center;line-height: 86px;}.icon-shejishi2 {font-size: 24px;//这么写是不起作用的color: red;//修改颜色，只能是单色position: absolute;left: 38%;top: -23px;}
出来的效果图：
特别注意：修改字体图标的大小要么用行间样式，如果用class选择器要加!important（权重最高）
三/ “unicode”的使用
3.1.1.将整个下载下来的文件放入你的项目中（当然可以不用整个，放入需要的文件就行，反正文件不大我就都放进来啦）
3.1.2.在你需要小图标的html文件中引入如下的代码
<style>@font-face {font-family: 'iconfont';src: url('iconfont/iconfont.eot'); //注意路径，不可照搬src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont/iconfont.woff') format('woff'),url('iconfont/iconfont.ttf') format('truetype'),url('iconfont/iconfont.svg#iconfont') format('svg');}.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;}</style>
3.1.3在页面中使用小图标
<i class="iconfont">3</i>
3.2.我在项目中的使用
html代码
<li class="footer-home"><i class="iconfont" ></i>首页</li><li class="footer-classify"><i class="iconfont"></i>分类</li><li class="footer-shopping"><i class="iconfont"></i>购物车</li><li class="footer-my"><i class="iconfont"></i>我的</li>
css代码
.wrap-footer ul li {display: inline-block;position: relative;width: 23%;height: 100%;font-size: 14px;font-size: 14px;color: #616161;text-align: center;line-height: 86px;} .iconfont {font-size: 24px !important;//权重最高color: red;position: absolute;left: 38%;top: -23px;}
效果图和上面一样，不展示了
四/ “symbol”的使用
4.1.1.将下载的“iconfont.js”文件（或整个下载的文件）放入你的项目中，并引入需要该css文件的html文件中，例如
<script src="iconfont/iconfont.js"></script>
4.1.2.在你需要小图标的html文件中引入如下的代码
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
4.1.3.在页面中使用小图标
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>
4.2.我在项目中的使用
html代码（就放一个图标吧）
<li class="footer-home"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shejishi2"></use></svg>首页</li>
css代码同上
如果要使用多色图标，可以参考这篇文章Iconfont 多色图标和渐变色图标的应用
五/ Unicode字符集
可以用在伪元素的content里，同样可以通过css改变大小/颜色等 ，bootstrap的底部导航就是用的这种
六/ 总结
6.1.单色图标或者带有渐变色的图标就用“font-class”
6.2.多色图标就用“symbol”，可以自定义上传图标
补充：如何在vue中使用
一、unicode
下载至本地
- 我将下载的文件放入src/common/font里面了，在src/common/lesses里新建了一个font.less文件，将下面的代码复制到该less文件里
@font-face {font-family: 'iconfont';src: url('../font/iconfont.eot'); src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),url('../font/iconfont.woff') format('woff'),url('../font/iconfont.ttf') format('truetype'),url('../font/iconfont.svg#iconfont') format('svg');}.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;}
- 下面就是引用该文件了，一种是全局引用，在main.js文件中引入
//引入iconfont字体图表import './common/lesses/font.less'
- 一种是在使用的模板中引入
@import './common/lesses/font.less';
使用线上链接
那就把如下代码复制到font.less文件中，其他操作都如上
@font-face {font-family: 'iconfont'; /* project id 993217 */src: url('/t/font_993217_ys2k5b2lst.eot');src: url('/t/font_993217_ys2k5b2lst.eot?#iefix') format('embedded-opentype'),url('/t/font_993217_ys2k5b2lst.woff') format('woff'),url('/t/font_993217_ys2k5b2lst.ttf') format('truetype'),url('/t/font_993217_ys2k5b2lst.svg#iconfont') format('svg');}.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;}
二、icon-font字体
主要是使用link标签写在index.html中，一种是本地引入（和上面一样写法），另一种是使用http地址例如
<link rel="stylesheet" type="text/css" href="/t/font_993217_ys2k5b2lst.css">
