elementUI中添加阿里图标

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里面


忘记了说如何引入


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容