VUE element-ui中el-button使用iconfont图标

步骤:
1、进入iconfont官网传送门并使用任意方式登录。

2、按如下步骤进行:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3.图标库建好后直接搜索自己需要的图标按如下步骤:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
4、将文件解压后,在项目assets下新建文件,将解压文件放入

在这里插入图片描述

5、在main.js中引入:

import './assets/icon/iconfont.css'

  
  

    6、在标签中使用类名引入图标:
    在这里插入图片描述

    <el-button style="margin-left: 4px" class="filter-item iconfont icon-zhuangtai" type="primary" size="mini" @click="exportExcel">设置状态</el-button>
    //注意:类名iconfont必须加
    
      
      

      7、页面效果:
      在这里插入图片描述
      可以看到字体样式太大
      8、修改样式:
      在这里插入图片描述

      看下修改后的效果:
      在这里插入图片描述
      可以看到和其他相同的效果;
      注意:这里icon-font将图标作为文字格式处理,即修改字体大小样式,icon随之改变

      • 1
        点赞
      • 4
        收藏
        觉得还不错? 一键收藏
      • 0
        评论

      “相关推荐”对你有帮助么?

      • 非常没帮助
      • 没帮助
      • 一般
      • 有帮助
      • 非常有帮助
      提交
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值