vue添加个性化图标

element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下

对于我们来说,首选的当然是阿里icon库

教程:

1.打开阿里icon,注册 >登录>图标管理>我的项目

 

vue添加个性化图标_第1张图片

图标管理>我的项目,点进去

新建项目

 

vue添加个性化图标_第2张图片

新建项目

项目名称随便写。前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了。

设置完,点新建

vue添加个性化图标_第3张图片

注意前缀。设置完,点新建

现在我们返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一个一个去点,太浪费时间,那么请在控制台输入以下代码,批量导入

var icons = document.querySelectorAll('.icon-gouwuche1');

var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };

auto_click(0);

vue添加个性化图标_第4张图片

然后点击回车,他会把这套图库所有icon加入购物车

点页面上的购物车

vue添加个性化图标_第5张图片

页面右边的购物车图标,点击

把图标都添加到刚才创建的项目里

vue添加个性化图标_第6张图片

添加

设置fontClass,然后下载到本地

 

vue添加个性化图标_第7张图片

下载到本地,解压

解压后你会得到这些文件,打开图中圈中的文件

vue添加个性化图标_第8张图片

下一步开始使用这些图标:

在vue的assets下面创建一个名称为icon的文件夹,然后将上面解压得到的文件全部拷贝进来。

1、修改其中的iconfont.css文件,向其中添加以下内容:

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

2、在main.js中导入样式文件,加入下面这句

import './assets/icon/iconfont.css'

3、接着就可以在要使用的地方添加想要的图标了,icon-unorderedlist是图标对应的名称,el-iconfont是第一步设定的样式名称。

 

你可能感兴趣的:(vue)