VUE+ElementUi基础框架导入自己的ico图标

小明的个人博客

在vue框架中使用ElementUi组件,某些时候在ElementUi库里找不到合适自己的ico图标怎么办呢~

1：打开阿里巴巴矢量图网站,注册登录

• 点我打开
• 注册登录
• 创建项目
• 
• 

2：搜索自己喜欢的图标

• 右上角根据关键字搜索,这个资源站的图标很多,选择一个喜欢的图标,加入到购物车

• 进入购物车,将图标加入到项目中

  
  
  
  

• 点击下载到本地,将压缩包里的内容复制到你的项目中,压缩包里的内容大致是如下图

  
  

3：在ElementUi中引用图标

• 编辑iconfont.css

[class^="custom-user"], [class*=" custom-user"] {
  font-family:"fontFamily" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}   //加入这一段代码

两个class就是你的项目名称,注意第二个class前面有个空格。font-family写你项目编辑的时候的值

• iconfont.css预览

[class^="custom-user"], [class*=" custom-user"] {
  font-family:"fontFamily" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 18px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fontFamily {
  font-family: "fontFamily" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.custom-user-zhanghao:before {
  content: "\e601";
}

.custom-user-mima:before {
  content: "\e602";
}

.custom-user-mima1:before {
  content: "\e603";
}

.custom-user-zhanghao1:before {
  content: "\e604";
}

.custom-user-yanzhengma:before {
  content: "\e605";
}

.custom-user-touxiang:before {
  content: "\e606";
}

• 导入css文件

    import "../assets/icon/iconfont.css"

• 直接引用即可

            <el-form-item>
                <el-input class="loginInput"
                        placeholder="邮箱/手机号码"
                        prefix-icon="custom-user-zhanghao1"  //这就是我自己的图标名称
                        v-model="userInfo.username">
                </el-input>
            </el-form-item>

小明的个人博客