iconfont引入到项目中

iconfont官网地址：

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3 挑选任意一个图标，加入购物车，下载代码，将代码复制到web项目。

文件结构如图：

页面中引入文件：

<link rel="stylesheet" href="/static/iconfont/font_43saalznrsi/iconfont.css">
<script src="/static/iconfont/font_43saalznrsi/iconfont.js"></script> <!-- symbol形式的引入才需要这个文件 -->

unicode引入方法：

<i class="iconfont"></i>

这个 是看iconfont.json 里面的unicode来的。如图：

font-class引入：

<span class="iconfont icon-sop-cgfk-hover"></span>

这个sop-cgfk-hover也是iconfont.json文件里面找的，如图：

symbol引入(记得引入iconfont.js)：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-sop-cgfk-hover"></use>
</svg>

3种引入方式的效果依次如图，但是为什么第三个和前2个不一样???：

附： iconfont引入方法的文档地址

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=code