iconfont-阿里巴巴矢量图标库的使用

进入官网地址： https://www.iconfont.cn/，选择一种登录方式。

（1）图标引入方式一
①选择一个喜欢的图标库小库打开
②进入小库后选择一个喜好的图标，点击收藏或下载，这里点击下载
③点击“赋值SVG代码”，直接放进hmtl文件就可以显示了。
④代码以及运行结果如下

（2）图标引入方式二
①进入图标库后选择一些喜欢的图标，点击收藏。
②打开右上角购物车，点击“下载代码”。

③用代码编辑器（如vscode）打开demo_index.html文件，部分代码如下。

<li class="dib">
	<span class="icon iconfont">&#xee7e;</span>
	<div class="name">01女性角色</div>
	<div class="code-name">&amp;#xee7e;</div>
</li>

④引入iconfont.css和iconfont.ttf文件，其中iconfont.css的代码如下所示。

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('../fonts/iconfont.ttf?t=1649488639463') format('truetype');  /* 需要引入正确的iconfont.tff文件路径  */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-zhifubaozhifu:before {
	content: "\e65e";
}

⑤在index.html中引入字体图标代码，如支付宝图标代码。

<span class="icon iconfont icon-zhifubaozhifu"></span>

相关链接
1、iconfont-阿里巴巴矢量图标库在layui中的使用。
2、iconfont-阿里巴巴矢量图标在界面中无法正常显示，表现为一个方块。