默认分类

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

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

第一个类名是固定的iconfont 第二个类名是你所需要的类名,取自于fontClass代码
9.png

10.png

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

This is just a placeholder img.