在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>
