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. 理解 IO_WAIT 并且了解利用包括 top htop iotop iostat 工具来查看 IO 性能

    今天继续拜读「深入浅出计算机组成原理」专栏,觉得讲 IO_WAIT 这篇很有意思,正好可以结合前面的一篇讲物理硬件存速度的一块儿看. 现在我们看硬盘厂商出品的性能报告,通常会看到两个指标,一个是响应时 ...

  2. Druid: A Real-time Analytical Data Store

    Druid一种实时数仓,针对的场景和目的,如下比较明确 Druid was originally designed to solve problems around ingesting and exp ...

  3. ROLLUP、CUBE、GROUP BY的使用区别

    1.ROLLUP:根据维度在数据结果集中进行的聚合操作,可多维度SELECT count(*) num,MONTH(register_time) times,`status` FROM `user` ...

  4. mac opencv 提示摄像头权限问题

    通常在iOS开发下,我们的app需要在Info.plist文件中配置所需要的各种限制:如摄像头权限: 本次我们在mac下创建了一个command line 程序,并且设定是c++开发,并配置了open ...

  5. 大数据 Hibernate

    大数据 Hibernate - 国内版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=%E5%A4%A7%E6%95%B0% ...

  6. MySQL 设计与开发规范

    MySQL 设计与开发规范 1 目的 本规范的主要目的是希望规范数据库设计与开发,尽量避免由于数据库设计与开发不当而产生的麻烦:同时好的规范,在执行的时候可以培养出好的习惯,好的习惯是软件质量的很好保 ...

  7. Xamarin.FormsShell基础教程（4）Shell项目内容列表页面运行效果

    Xamarin.FormsShell基础教程(4)Shell项目内容列表页面运行效果 在创建好Shell解决方案后,就可以运行程序了.本小节将讲解运行后的效果. 内容列表页面 运行程序,初始效果如图1 ...

  8. scrapy入门案例

    一. 新建项目(scrapy startproject) 在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令: scrapy startproject scrapy ...

  9. mysql新增用户

    新开了个项目,数据库也想新搞个用户,先登陆mysql,看看原来都有哪些: root@wlf:/# mysql -uroot -p Enter password: Welcome to the MySQ ...

  10. 容器docker快速入门

    一.概述 什么是docker docker是一个应用容器引擎,通俗的讲,docker和我们的vm虚拟机有很多相似的地方,当然也有很多不同的地方 Docker理念是将应用及依赖包打包到一个可移植的容器中 ...