一、iconfont应用
官网：https://www.iconfont.cn/
1、找到须要的icon图标，增加至购物车
2、购物车中点击增加至我的项目，可退出到GitHub的我的项目中,也可间接下载到本地3、援用图标unicode援用
unicode是字体在网页端最原始的利用形式，特点是：
- 兼容性最好，反对ie6+，及所有古代浏览器。
- 反对按字体的形式去动静调整图标大小，色彩等等。
- 然而因为是字体，所以不反对多色。只能应用平台里单色的图标，就算我的项目里有多色图标也会主动去色。
应用步骤：
第一步：拷贝我的项目上面生成的font-face
第二步：定义应用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;}第三步：筛选相应的图标并获取字体编码，利用于页面
<i class='iconfont'></i>4、font-class援用
font-class是unicode应用形式的一种变种，次要是解决unicode书写不直观，语意不明确的问题。
与unicode应用形式相比，具备如下特点：
- 兼容性良好，反对ie8+，及所有古代浏览器。
- 相比于unicode语意明确，书写更直观。能够很容易分辨这个icon是什么。
- 因为应用class来定义图标，所以当要替换图标时，只须要批改class外面的unicode援用。
- 不过因为实质上还是应用的字体，所以多色图标还是不反对的
应用步骤如下：
第一步：拷贝我的项目上面生成的fontclass代码，link标签引入
//at.alicdn.com/t/font_xxxx.css第二步：筛选相应图标并获取类名，利用于页面
<i class='iconfont icon-xxx'></i>symbol援用
这是一种全新的应用形式，应该说这才是将来的支流，也是平台目前举荐的用法。这种用法其实是做了一个svg的汇合，与下面两种相比具备如下特点：
- 反对多色图标了，不再受单色限度。
- 通过一些技巧，反对像字体那样，通过
font-size,color来调整款式。 - 兼容性较差，反对 ie9+,及古代浏览器。
- 浏览器渲染svg的性能个别，还不如png。
应用步骤：
第一步：拷贝我的项目上面生成的symbol代码，script标签引入：
//at.alicdn.com/t/font_xxxx.js第二步：退出通用css代码（引入一次就行）:
<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>第三步：筛选相应图标并获取类名，利用于页面
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use></svg>下载到本地的援用办法如下：
二、webpack打包
webpack.config.js配置如下
module: { rules: [ { exclude: /\.(js|json|html|css|less|scss|png|jpeg|jpg|gif)$/, //排除资源 loader: 'file-loader', options: { outputPath: 'iconfont/', publicPath: './iconfont', name: '[name][hash:8].[ext]' } } ]}