element为我们提供了丰富的好用的组件，图标的样式也很多，但还是有一些常用的图标没有在官方图标库里边，比如说微信、淘宝、支付宝等等。那么如何把我们需要的图标添加到进去呢？

因为element有官方图标库，那我们引入的时候也按照官方的class格式，做到统一。

我在这里只说一种方法，那就是如何引用阿里iconfont图标作为我们自定义的图标。

首先呢需要现在iconfont官网找到我们需要的图标，然后加入到购物车并且放入项目，如图：

添加到项目之后会自动打开项目，然后找到我们刚刚添加的项目，点击更多操作---编辑项目

然后添加后缀：el-icon-xx。

在这里编辑项目是为了保持class和element官方图标库class的统一。

修改完之后就可以下载下来了。我们需要的把下图中的文件copy到我们的项目中，

然后可以在main.js中引入iconfont.css这个文件。然后就可以使用里边的图标了。

怎么使用呢？使用iconfont.css中的这两个类名即可。.iconfont这个类名是必须要写的，第二个类名看你需要那个就写那个了。

给element添加自定义图标

给element添加自定义图标的更多相关文章

  1. easyui中tree控件添加自定义图标icon

    来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...

  2. Nancy之给我们的网站添加自定义图标

    当我们在做一个网站时,可能经常会有这样一个需求,要给我们做的网站添加一个自定义的图标. 在Nancy中,默认是的下面这样 一个妹子的头像,其实也是挺好看的!! 那么当我们想要替换这个默认的,应该要怎么 ...

  3. google maps v3 添加自定义图标(marker,overlay)

    google搜了很久都没找到符合v3版本的google maps自定义图标,可以让图标使用自己的html,都是V2版本的,依靠重写google api属性来完成. 然后就找了个jquery下的goog ...

  4. React Native如何添加自定义图标

    iOS 1.通过xcode将'xxx.ttf'文件引入项目,如图: 2.在node_modules/react-native-vector-icons下新建Icomoon.js文件,复制一份Icomo ...

  5. MUI 添加自定义图标（注意点）

    参考: https://blog.csdn.net/qq_39759115/article/details/79436606 注意: 1. 将这个原来的逗号改成分号 2. 这些图标的名字都可以改名字

  6. 在ionic3+angular4项目中添加自定义图标

    在阿里图标库下载自己所需要的图标解压为一下目录 把iconfont.xx文件全部放到src/assets/fonts/文件夹下,可以全部替换里面的文件,但是要把之前iconfont.css文件下的文件 ...

  7. HTML5 拖放（Drag 和 Drop）详解与实例

    简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaSc ...

  8. HTML5 拖放（Drag 和 Drop）详解与实例(转)

    公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多, ...

  9. HTML5-CSS3-JavaScript(3)

    我们就从HTML5的基础总结起.希望可以提高自身的基础. HTML5 头部 和 元信息 使用 <head.../> 元素可以定义HTML文档头,该元素可以包含如下子元素. <scri ...

随机推荐

  1. bootstrap-全局CSS&js插件

    一.全局CSS 1.概述 1. 全局CSS样式: * 按钮:class="btn btn-default" * 图片: * class="img-responsive&q ...

  2. JavaScript 箭头函数

    ES6新标准增加了一种新的函数,箭头函数. x=>x*x 相当于: function (x){ return x*x; } 如果参数不是一个,就需要用括号()括起来: // 两个参数:var t ...

  3. MLflow系列1：MLflow入门教程（Python）

    英文链接:https://mlflow.org/docs/latest/tutorial.html 本文链接:https://www.cnblogs.com/CheeseZH/p/11943280.h ...

  4. Python示例项目学习

    原文地址:http://www.360doc.com/showweb/0/0/874025604.aspx 「 Python3 实现火车票查询工具 」   相信很多人学Python都是冲着它强大的爬虫 ...

  5. kotlin基础 函数编写规则

  6. Mysql 有数据更新,无则插入

    项目中需要去更新数据的版本号. INSERT INTO Biz_CourseErrorBookDetail (CourseID,QuestionID,StudentID,ErrorCount,Last ...

  7. anaconda 安装指定源的包

    当前知道的有两种方式可以查找: 1.conda search 命令:conda search pkg_name 安装的时候直接:conda install cudatoolkit=版本后 conda ...

  8. Mac OSX系统中Hadoop / Hive 与 spark 的安装与配置 环境搭建 记录

    Mac OSX系统中Hadoop / Hive 与 spark 的安装与配置 环境搭建 记录     Hadoop 2.6 的安装与配置(伪分布式) 下载并解压缩 配置 .bash_profile : ...

  9. Mac安装MySQL-python的血泪史

    现象描述 起初正常使用pip命令提示如下的错误: cc -bundle -undefined dynamic_lookup -Wl,-F. build/temp.macosx-10.14-intel- ...

  10. Java13新特性 -- 新增 移除 废弃 已知问题等

    新增 添加FileSystems.newFileSystem(Path, Map<String, ?>) Method 新的java.nio.ByteBuffer Bulk get/put ...