博客

我们使用element-ui 项目时有的时候会觉得官方的图标不适合我们的项目，所以会去阿里云矢量图库去添加一些图标具体步骤如下
1 先去阿里云矢量图官网注册

2 注册之后，搜索我们需要的图标

点击加入购物车

添加完成之后然后点击购物车

点击添加至项目

如果没有项目，就新建一个项目


项目设置中修改项目的一些信息

特别注意前缀要和element-ui的前缀名称冲突，自己根据自己的需要修改一下就行啦

字体格式根据需要修改一下，不点击彩色的话可以选择生成SVG 和EOT

选择Font class 下载到本地，会下载一个压缩包，解压之后内容如下

只需要红色框体部分即可
3 在我们的项目 src 下的assets 下

把下载下的压缩包中红色部分丢进去就行啦

4 修改 iconfont.css 文件中的内容

添加的代码如下

[class^="el-ali-"],
[class*="el-ali-"]
{
  font-family: "friends" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^=“el-ali-”], 中是你的FontClass/
Symbol 前缀如果不加上这段代码，图标会显示一个小方框
5 在main.js 中引入iconfont.css如下图所示

6 然后再项目代码块中添加icon 的地址

名称不要添加错误，然后重启项目，访问查看效果