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

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

2、按如下步骤进行:
VUE element-ui中el-button使用iconfont图标_第1张图片
VUE element-ui中el-button使用iconfont图标_第2张图片

VUE element-ui中el-button使用iconfont图标_第3张图片

3.图标库建好后直接搜索自己需要的图标按如下步骤:
VUE element-ui中el-button使用iconfont图标_第4张图片
VUE element-ui中el-button使用iconfont图标_第5张图片
VUE element-ui中el-button使用iconfont图标_第6张图片
VUE element-ui中el-button使用iconfont图标_第7张图片
VUE element-ui中el-button使用iconfont图标_第8张图片
4、将文件解压后,在项目assets下新建文件,将解压文件放入

VUE element-ui中el-button使用iconfont图标_第9张图片

5、在main.js中引入:

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

  
  
    
    
    
    

    6、在标签中使用类名引入图标:
    VUE element-ui中el-button使用iconfont图标_第10张图片

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

      7、页面效果:
      VUE element-ui中el-button使用iconfont图标_第11张图片
      可以看到字体样式太大
      8、修改样式:
      VUE element-ui中el-button使用iconfont图标_第12张图片

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

      你可能感兴趣的:(Vue,vue.js,ui,前端)