首页 > 其他 > 详细

把阿里图标库的图标生成代码并应用于项目中

时间:2021-09-02 00:34:44      阅读:11      评论:0      收藏:0      [点我收藏+]

阿里图标库地址:https://www.iconfont.cn/
1.根据所需搜索到想要的图标,点击添加至购物车

技术分享图片

 2.点击购物车

 技术分享图片

 

 

3.点击添加至项目

  技术分享图片

 

 

 4.选择添加到一个项目里面,点击确定

 技术分享图片

 

 5.修改图标的颜色、那条描边的距离。。。等。

 技术分享图片

 

 技术分享图片

 

 

6.点击font class 的选项,可以看到你添加过的图标,下面的英文对应的是图标代码,点击下载至本地。

技术分享图片

 

 7.解压文件

 

 技术分享图片

 

 8、删除demo.css和demo_index.html二个文件

 技术分享图片

 

 9.引用iconfont.css至你的前端项目 请注意引用文件路径的正确性。

 技术分享图片

 

 

 

10.使用的时候

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

 技术分享图片

 

 技术分享图片

 

把阿里图标库的图标生成代码并应用于项目中

原文:https://www.cnblogs.com/nature161/p/15209647.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!