1、进入http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.de12df413&cid=31
将图标添加入库,可以选择不同尺寸和颜色的图标。
2、添加至项目,然后登录进入。在图标管理-》我的项目=》下载到本地 :下载项目。
3、进入项目找到一下5个文件: iconfont.css、iconfont.eot、iconfont.ttf、iconfont.svg、iconfont.woff。
4、将3中iconfont.eot、iconfont.ttf、iconfont.svg、iconfont.woff文件放到项目中的my-project/src/assests/myfont/下。其中myfont为新建的文件夹。
5、在src下建立app文件夹,然后新建app.scss文件。将iconfont.css里面内容复制到app.scss中。
6、修改app.scss文件,主要修改部分:
原先:.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
现在:
[class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"iconfont" !important;
font-size: inherit;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
注意路径src:url的路径需要调整
7、所有.icon-全部替换为.el-icon-my,避免与原本icon冲突
8、引入到main.js里面