vue添加个性化图标

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

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

教程：

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

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

新建项目

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

设置完，点新建

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

现在我们返回阿里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);

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

点页面上的购物车

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

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

添加

设置fontClass,然后下载到本地

下载到本地，解压

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

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

在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是第一步设定的样式名称。

<i class="icon-unorderedlist el-iconfont"></i>

vue添加个性化图标相关推荐

php怎么设置个性标签,zblogPHP导航栏菜单名称前的个性化图标设置方法
很多初次使用 zblog 模板的朋友都很纠结为什么主题里面显示导航栏名称前都有个性化图标,而下载的模板却不显示图标呢?下面别彧博客就来简单下 zblogPHP 导航栏菜单名称前面的个性化图标的设置步骤 ...
填写实验计算机桌面的系统图标有,Win8系统桌面添加计算机图标的图文步骤
导读:鉴于win8众多新设计和新创意,让刚接触win8的朋友有点茫然,以往熟悉的操作方法和技巧似乎派不上用� T趙in8默认桌面中没有显示 "计算机"图标,因为win8中没有了开始 ...
H5头像完整制作，可拖拽缩放，可添加装饰图标（装饰图标支持缩放、旋转、拖拽）
H5头像制作类的程序本以为到处都可以搜索到,可是真写这个项目的时候才发现太困难了,因为根本没有现成的功能模块可以拼凑,着实费了不少力气,好在最终圆满交工. 还是先看效果源码获取渠道小程序内联系客服 ...
win8系统桌面计算机图标,在Win8桌面轻松添加计算机图标技巧
[IT168 应用]Win8作为微软下一代操作系统,再有一个多月就要正式发布了,其最大的亮点就是开始屏幕是取代了原来开始菜单,当然,在功能设计上,与以往的操作系统也有不少改进的地方. 鉴于win8众多 ...
uniapp项目添加阿里图标库字体图标（图标在手机、浏览器均可查看）
前言提示:本篇文章正文内容分为: 给uniapp项目导航栏添加字体图标: 在uniapp项目中使用字体图标. 一.给uniapp项目导航栏添加字体图标 1:登录阿里巴巴矢量图标库:https://w ...
vue element自定义图标-iconfont图标的使用
文章目录 1 登录iconfont 2 配置自己的项目 3 搜索并添加 4 编辑图标名称 5 下载项目图标集文件 6 更新引用图标的项目文件 7 使用 8 图标名称查询 1 登录iconfont 网址 ...
Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
Vant 库中如何给 List 列表组件的 cell 中左右两边来添加小图标？
Ⅰ.问题描述: 1.Vant 中 List 列表的使用是方便且常用的,但如何给 List 组件中添加小图标而达到想要的效果呢? 2.图例展示: 其一.想要在 Vant 的 List 组件右边添加播放 ...
vue点击图标跳出精美搜索框
好的,我可以用中文来为你解答这个问题. 在 Vue 中,你可以使用 @click 绑定事件来处理点击图标时跳出精美搜索框的逻辑. 首先,你需要在 template 中添加一个图标和一个搜索框,如下所示 ...

vue添加个性化图标

教程：

vue添加个性化图标相关推荐

最新文章

热门文章