1.Unicode
特点
- 兼容性最好，支持ie6+
- 支持按字体的方式去动态调整图标大小，颜色等等
- 不支持多色图标
- 在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难
使用步骤：
1.直接引用线上地址或下载至本地
image
2.复制以下代码到index.html中，或新建一个iconfont.css文件引入
<style type="text/css">
@font-face {
font-family: 'iconfont';
/* project id 1000117 */
src: url('//at.alicdn.com/t/font_1000117_n3ngonecs7.eot');
src: url('//at.alicdn.com/t/font_1000117_n3ngonecs7.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.woff') format('woff'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1000117_n3ngonecs7.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.在组件中使用
<i class="iconfont"></i>
2.Font class
特点：
- 兼容性良好，支持ie8+
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
- 不支持多色图标
使用步骤：
1.直接引用线上地址或下载至本地
image
- 在index.html中引入
<link href="//at.alicdn.com/t/font_1000117_n3ngonecs7.css" rel="stylesheet" type="text/css"/><!--线上（推荐开发测试用）-->
<link href="./static/iconfont.css" rel="stylesheet" type="text/css"/><!--本地（推荐项目上线用）-->
3.在组件中使用
<i class="iconfont caiseshijian"/>
3.Symbol
特点：
- 支持多色图标，不再受单色限制
- 支持像字体那样通过font-size,color来调整样式
- 支持 ie9+
- 可利用CSS实现动画
- 减少HTTP请求
- 矢量，缩放不失真
- 可以很精细的控制SVG图标的每一部分
使用步骤：
1.直接引用线上地址或下载至本地
image
2.在index.html文件中引入
<script src="//at.alicdn.com/t/font_1000117_n3ngonecs7.js"></script><!--引入线上的地址（推荐开发用）-->
<script src="./static/iconfont.js"></script><!--引入下载后的iconfont.js文件（推荐线上用）-->
- 设置通用css
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
3.在vue组件中引用,href里面的#caisenan即图标类名
<svg class="icon" aria-hidden="true">
<use xlink:href="#caisenan"></use>
</svg>
