在vue项目中使用iconfont图标库

1、iconfont图标库网址: https://www.iconfont.cn/home/index

将自己需要的图标加入购物车

在vue项目中使用iconfont图标库

 

 打开购物车点击添加到项目

在vue项目中使用iconfont图标库

 

打开项目点击项目设置

在vue项目中使用iconfont图标库

 

 在vue项目中使用iconfont图标库

 

 

 选择font class选项,保存到本地

在vue项目中使用iconfont图标库

 

 

 

2、在Vue项目中assets文件夹下新增一个icon文件夹,将下载下来的文件解压到icon文件夹

在vue项目中使用iconfont图标库

 

 在app.vue文件中引用css

1 <script>
2 import "./assets/icon/iconfont.css"
3 </script>

在组件中就可以用class方式使用啦

  <n-button type="primary" @click="save" style="mai" class="el-icon-zzsave">保存</n-button>

使用效果

在vue项目中使用iconfont图标库

 

 class名称可以通过打开下载下来的文件中demo_index.html获取

在vue项目中使用iconfont图标库

 

上一篇:美团/饿了么外卖CPS联盟返利公众号小程序核心源码代码


下一篇:【博客美化】04.自定义地址栏logo