Iconfont是什么？
iconfont是阿里旗下的一套图标库，UI设计师设计号图标后，会将图标上传到iconfont的项目库中。前端开发人员需要下载项目图标，并在项目中使用。它的原理就是将很多 icon 做成字体库，通过样式或者字体对应的字符集来显示这个 icon。
跳过注册/登陆
项目中使用
ifonfont 可以让我们使用三种方式引入，分别是unicode，font class，symbol，我们点击不同的方式获取代码。下面我说下这三种具体怎么使用。
首先我们将我们字体库下载到本地
我们将这些文件放在项目一个文件夹中，我们只需要以下这些文件
我们需要将iconfont.css引入到我们的项目中。
第一种：Unicode方式
unicode是字体在网页端最原始的应用方式，我们直接在图标上复制对应的代码即可
<link rel="stylesheet" href="./iconfont/iconfont.css">
<div>
<i class="iconfont"></i>
</div>
如果你用的是vue，那么你需要在main.ts中引入iconfont.css，其他框架大同小异
import { createApp } from 'vue'
import App from './App.vue'
import '../assets/iconfont/iconfont.css';
app.mount('#app')
unicode特点：
（1）兼容性最好，支持ie6+，及所有现代浏览器。
（2）支持按字体的方式去动态调整图标大小，颜色等等。
（3）但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
第二种：Font class方式
font-class是unicode的方式的变种，主要是解决unicode书写不直观，语意不明确的问题。
和unicode一样，我们直接在图标上复制对应的代码即可
<link rel="stylesheet" href="./iconfont/iconfont.css">
<div>
<i class="iconfont icon-dingwei1"></i>
</div>
与Unicode使用方式相比，具有以下特点
（1）兼容性好，支持IE8+，以及所有现代浏览器
（2）相比于Unicode语意明确，书写更直观
（3）替换图标时，使用class定义图标，所以替换时只需要修改class里面的Unicode引用
（4）本质上还是使用的字体，所以多色图标是不支持的
第三种：Symbol方式
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。
我们直接在图标上复制对应的代码即可
<script src="./iconfont/iconfont.js"></script>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dingwei1"></use>
</svg>
</div>
如果你用的是vue，那么你需要在main.ts中引入iconfont.js，其他框架大同小异
import { createApp } from 'vue'
import App from './App.vue'
import '../assets/iconfont/iconfont.js';
app.mount('#app')
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
（1）支持多色图标了，不再受单色限制。
（2）通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
（3）兼容性较差，支持 IE9+，及现代浏览器。
（4）浏览器渲染 SVG 的性能一般，还不如 png。
总结
当然我们也可以在线使用这些图标，我们只需复制在线的链接到项目中，模板中的用法和离线是一样的，不建议我们在线使用，稳定性不保证
