一下是官方教程原话，表述的不是很清晰
Element 的一些组件提供了 icon 属性（如 Input），如果希望传入第三方图标库中的图标，需要进行如下操作：
1. 修改第三方图标库的前缀（见下方说明）
2. 添加以下 CSS：
[class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"your-font-family" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: inherit;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
|
之后就可以像使用 Element 内置图标一样使用第三方图标。比如在 el-input 中：
<el-input icon="my-xxx" />
|
————————–分割线—————————————-
如果需要新的ICON，就去Iconfont找新的ICON
然后选择自己要的ICON添加到项目中，如图:
下载到本地后对iconfont.css进行如下修改
/*.iconfont*/
[class^="el-icon-skl"], [class*=" el-icon-skl"] {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-skl-dashboard:before { content: "\e7cd"; }
|
修改完成后将css里用到的字体文件都放到vue项目中.然后在app.js或者main.js中引入样式文件
import '../icons/iconfont.css'
|
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
