Vue Element 使用 icon 图标 (第三方)

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

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

教程:

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

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

新建项目

新建项目

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

设置完, 点新建

注意前缀设置完, 点新建

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

  1. var icons = document.querySelectorAll('.icon-gouwuche1');
  2. var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };
  3. auto_click(0);

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

点页面上的购物车

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

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

添加

设置 fontClass, 然后下载到本地

下载到本地, 解压

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

将以下代码加进去, 注意: el-icon-third 是你之前设置的 icon 前缀, 第二个 el-icon-third 前边有空格的

  1. [class^="el-icon-third"], [class*="el-icon-third"]/* 这里有空格 */
  2. { font-family: "iconfont" !important;
  3. font-size: 16px;
  4. font-style: normal;
  5. -webkit-font-smoothing: antialiased;
  6. -moz-osx-font-smoothing: grayscale; }

绿框的数据保持一致就好

2. 上边设置好以后, 打开 vue 项目, 我是在 src-assets 下创建了 icon 文件夹, 将所有的文件复制了过来

在 main.js 里边把 CSS 引进来

记得引进来

然后重新 npm run dev 一下

3. 打开在阿里 icon 的项目, 复制你想要的图标代码

图标代码: el-icon-ump-qianniudaidise

使用, 两种引用方式, 跟 element 自带的使用方法一样

最后效果:

Vue Element 使用 icon 图标 (第三方)的更多相关文章

  1. Vue Element使用icon图标(第三方)

    element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里i ...

  2. Vue如何引入icon图标

             1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角“IcoM ...

  3. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

  4. VUE设置浏览器icon图标

    一.将[logo.png]格式图片转换为[logo.bmp]格式 ps打开图片- 存储为 BMP格式 保存好的[logo.bmp] 格式的图片重命名为[logo.ico] 二.将[logo.ico]图 ...

  5. Vue Element使用第三库icon图标

    一:引入单设图标 1.打开 阿里icon,注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页,点进去你想要的icon库,因为没有批量导入购物车,所以一般情况下需要一 ...

  6. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  7. 循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用

    在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此 ...

  8. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  9. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

随机推荐

  1. USACO 2003 Fall Orange Popular Cows /// tarjan缩点 oj22833

    题目大意: n头牛,m个崇拜关系,并且崇拜具有传递性 如果a崇拜b,b崇拜c,则a崇拜c 求最后有几头牛被所有牛崇拜 强连通分量内任意两点都能互达 所以只要强联通分量内有一点是 那么其它点也都会是 按 ...

  2. 城市代码表mysql

    只有代码: # ************************************************************ # Sequel Pro SQL dump # Version ...

  3. pandas中axis的含义

    定义一个dataframe: >>> df a b0 1 31 2 4 现在看两种用法: 1.求行的均值 >>> df.mean(axis=1)0 2.01 3.0 ...

  4. 2019.2.23VScode的c++配置详细方法

    根据个人经验,最新的c++配置方法. 主要的步骤: 安装Vscode 在Vscode类安装c++插件 安装编译调试环境 修改Vscode配置文件. 安装Vscode的步骤省略 如何配置Vscode中文 ...

  5. PHP算法之IP 地址无效化

    给你一个有效的 IPv4 地址 address,返回这个 IP 地址的无效化版本. 所谓无效化 IP 地址,其实就是用 "[.]" 代替了每个 ".". 示例 ...

  6. axios调用接口

    axios调用接口 1. 按照axiosnpm install --save-dev axios2.在main.js 引入axios, 设置全局属性$http 指向axios main.js impo ...

  7. ReentrantLock中的公平锁与非公平锁

    简介 ReentrantLock是一种可重入锁,可以等同于synchronized的使用,但是比synchronized更加的强大.灵活. 一个可重入的排他锁,它具有与使用 synchronized ...

  8. XYIXY.COM短网址在线生成,快速、稳定、永久有效,免费开放网址缩短API接口。

    在PHP中使用API 要在PHP程序中使用API,您必须通过file_get_contents或cURL发送GET请求:两者都是可靠的方法,您可以直接复制下面的代码. <?php /**** S ...

  9. leetcood学习笔记-79-单词搜索

    题目描述: 方法一;回溯 class Solution: def exist(self, board: List[List[str]], word: str) -> bool: max_x,ma ...

  10. 阿里云在云栖大会发布SaaS加速器3.0版最新成果,让天下没有难做的SaaS

    2019年杭州·云栖大会顺利落幕,超过6万人次观展,200余位顶尖科学家分享了前沿技术.作为“阿里云不做SaaS”,坚持“被集成”战略的落地体现,阿里云SaaS加速器在云栖大会现场发布了SaaS加速器 ...