今天在使用 vxe-table 时,需要引入 Element UI的图标,顺便就找了下这些组件库中图标的引用方式。

我们知道 Element 、Ant Design、Font Awesome 等很多组件库都包含了一套图标。这些图标通常采用 class 的方式引入:

<i class="el-icon-share"></i>

有时需要采用 css 的方式引入,可以通过下面这种方式:

.icon:before {
content: '\E611';
position: absolute;
left: -8px;
top: 14px;
font-family:element-icons!important;
}

这里的 content 值如果不知到,可以通过 F12 开发者工具选中图标查看。

Element-UI 使用 class 方式和 css 方式引入图标的更多相关文章

  1. 闪动效果的实现 (jquery方式和css方式)以及 keyframes和opacity 与ie等各浏览器兼容问题

    opacity 是CSS3中:设置元素的不透明度的属性(支持ie8以上) opacity: value|inherit;value用于规定不透明度.从 0.0 (完全透明)到 1.0(完全不透明). ...

  2. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  3. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  4. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  5. iOS开发UI篇—ios应用数据存储方式(XML属性列表-plist)

    iOS开发UI篇—ios应用数据存储方式(XML属性列表-plist) 一.ios应用常用的数据存储方式 1.plist(XML属性列表归档) 2.偏好设置 3.NSKeydeArchiver归档(存 ...

  6. iOS开发UI篇—ios应用数据存储方式(偏好设置)

    iOS开发UI篇—ios应用数据存储方式(偏好设置) 一.简单介绍 很多iOS应用都支持偏好设置,比如保存用户名.密码.字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能 每个应用 ...

  7. iOS开发UI篇—ios应用数据存储方式(归档)

    iOS开发UI篇—ios应用数据存储方式(归档)  一.简单说明 在使用plist进行数据存储和读取,只适用于系统自带的一些常用类型才能用,且必须先获取路径相对麻烦: 偏好设置(将所有的东西都保存在同 ...

  8. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

  9. iOS开发UI篇—ios应用数据存储方式(归档) :转发

    本文转发至:文顶顶http://www.cnblogs.com/wendingding/p/3775293.html iOS开发UI篇—ios应用数据存储方式(归档)  一.简单说明 在使用plist ...

随机推荐

  1. [luogu5464]缩小社交圈

    不难证明合法当且仅当满足一下两个条件: 1.每一个位置最多被覆盖两次(无环) 2.将选择的区间按左端点从小到大排序,对于每一个左端点,其之前的区间的最大右端点不小于其(连通) (关于第一个的充分性证明 ...

  2. [loj2477]劈配

    考虑依次选择每一位考生,设当前选到第$i+1$位,前i个分别为$p1,p2,--pi$(注意:这里只确定了导师的志愿编号),然后枚举第$p_{i+1}$,通过网络流建图+判定,复杂度为$o(nm*f( ...

  3. java实现自动化发布平台核心代码

    1.搭建jenkins环境 (1)jenkins官网下载jenkins.war包 (2)将该war包放入到tomcat的webapp的目录下(前提条件需要配置tomcat的环境,详情请自行百度) (3 ...

  4. 【AGC052A】

    题目 \(有T组询问\) \(每次给一个n\) \(3个01串\),\(这三个串每个都有n个0\),\(n个1\),\(求一个2*n + 1的字符串\),\(使他成为S1+S1,S2+S2,S3+S3 ...

  5. 洛谷 P4088 [USACO18FEB] Slingshot P(线段树+二维数点)

    题目链接 题意:有一个数轴,上面有 \(n\) 个传送门,使用第 \(i\) 个传送门,你可以从 \(x_i\) 走到 \(y_i\),花费的时间为 \(t_i\) 秒.你的速度为 \(1\) 格/秒 ...

  6. Atcoder Grand Contest 020 F - Arcs on a Circle(DP+小技巧)

    Atcoder 题面传送门 & 洛谷题面传送门 一道难度 unavailable 的 AGC F 哦 首先此题最棘手的地方显然在于此题的坐标可以为任意实数,无法放入 DP 的状态,也无法直接计 ...

  7. [Linux] Miniconda安装及其使用

    集群环境下安装conda进行软件管理.Miniconda是Anaconda的简化版,对于一般需求而言就够用了.因此,我这里安装Minconda3进行软件安装管理. 安装 Miniconda下载地址,版 ...

  8. 阿里云ECS磁盘性能测试

    阿里官方给出的性能指标 顺序读 测试命令 fio -directory=/var/lib/data -direct=1 -iodepth=1 -thread -ioengine=libaio -ran ...

  9. day09 orm查询优化相关

    day09 orm查询优化相关 今日内容概要 orm字段相关补充 orm查询优化相关 orm事务操作 图书管理系统练习 今日内容详细 orm事务操作 """ 事务:ACI ...

  10. tomcat源码1

    Lifecycle:(接口) LifecycleBase:abstract:添加,删除Listener,各种init,start,stop,destory LifecycleMBeanBase:abs ...