当前位置:   article > 正文

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

el-button icon

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

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

在这里插入图片描述

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

在这里插入图片描述

5、在main.js中引入:

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

  
  
    • 1

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

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

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

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

      声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/98742
      推荐阅读
      相关标签
        

      闽ICP备14008679号