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

阿里图标库地址: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代码

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

 

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

 

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

上一篇:vue利用v-if解决查看更多(组件查看数据)组件内不更新数据的问题:v-if会重新渲染组件,v-show不会


下一篇:vue高阶函数