如何把阿里图标库的图标生成代码并应用于自己的项目

有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库。那么我们如何才能够把阿狸图标库的图标引用到自己的项目中呢?耐着性子往下看吧!
阿里图标库地址:https://www.iconfont.cn/
1.根据所需搜索到想要的图标,鼠标悬停,点击添加到购物车
如何把阿里图标库的图标生成代码并应用于自己的项目_第1张图片
2.点击购物车
如何把阿里图标库的图标生成代码并应用于自己的项目_第2张图片
3.点击添加至项目
如何把阿里图标库的图标生成代码并应用于自己的项目_第3张图片
4.选择添加到一个项目里面,点击确定
如何把阿里图标库的图标生成代码并应用于自己的项目_第4张图片
5.点击font class 的选项,可以看到你添加过的图标,下面的英文对应的是图标代码,点击下载至本地。
如何把阿里图标库的图标生成代码并应用于自己的项目_第5张图片
6.你会的到一个download的压缩包,解压文件
如何把阿里图标库的图标生成代码并应用于自己的项目_第6张图片
7.复制除第一个二文件其余的文件至你的项目资源目录
如何把阿里图标库的图标生成代码并应用于自己的项目_第7张图片
8.引用iconfont.css至你的前端项目 请注意引用文件路径的正确性。
如何把阿里图标库的图标生成代码并应用于自己的项目_第8张图片
9.使用的时候

第一个类名是固定的iconfont 第二个类名是你所需要的类名,取自于fontClass代码
如何把阿里图标库的图标生成代码并应用于自己的项目_第9张图片

如何把阿里图标库的图标生成代码并应用于自己的项目_第10张图片

你可能感兴趣的:(如何把阿里图标库的图标生成代码并应用于自己的项目)