iconfont在项目中的使用方式

时间:2024-03-28 19:48:06

iconfont是一个阿里的图标库

1、地址: https://www.iconfont.cn

2、注册登录后选择‘我的项目’,并创建我的项目

iconfont在项目中的使用方式

3、选择需要的图标并加入购物车,选择购物车把购物车内的图标加入项目文件夹中

iconfont在项目中的使用方式

4、点击下载至本地,会获得如下文件夹和文件。

iconfont在项目中的使用方式

5、下面这一排文件有用,上面3个没有用。

iconfont在项目中的使用方式

6、在项目中新建一个iconfont文件夹,将下面这6个文件放入文件夹中,打开css文件,给非data的url加上相对路径,更加稳妥。

iconfont在项目中的使用方式

7、按照说明文档引入项目,说明文档为上述文件夹中的demo_index.html。

引入方法为:

<span class="iconfont">&#xe636;</span>

中间的字符串在demo_index.html说明文档中可以找到,他对应相应的icon。