今天在使用 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. Winform开发的快速、健壮、解耦的几点建议

    在Winform开发领域开发过十多年的项目中,见证着形形色色的架构和官方技术的应用,从最早类似Winform模式的WebForm技术,到接着的JQuery+界面组件,再到Asp.net Core的技术 ...

  2. git新手配置(windows环境)

    windows环境,初步了解git是个什么东西,使用过svn相关软件最佳,否则可以先补一下git的相关概念和用处,相关教程:https://www.liaoxuefeng.com/wiki/89604 ...

  3. Codeforces 521E - Cycling City(点双连通分量+分类讨论)

    Codeforces 题面传送门 & 洛谷题面传送门 大家都是暴力找生成树然后跳路径,代码不到 50 行(暴论)的一说--好,那本蒟蒻决定提供一种代码 150 行,但复杂度也是线性的分类讨论做 ...

  4. Atcoder Typical DP Contest S - マス目(状压 dp+剪枝)

    洛谷题面传送门 介绍一个不太主流的.非常暴力的做法( 首先注意到 \(n\) 非常小,\(m\) 比较大,因此显然以列为阶段,对行的状态进行状压.因此我们可以非常自然地想到一个非常 trivial 的 ...

  5. Codeforces 639E - Bear and Paradox(二分+贪心)

    Codeforces 题目传送门 & 洛谷题目传送门 原来 jxd 作业里也有我会做的题 i 了 i 了 首先这种题目的套路就是先考虑对于一个固定的 \(c\),怎样求出得分最高的策略,而类似 ...

  6. UVA12267 Telephone Network

    UVA12267 Telephone Network nb tea. 注意到如果两个需要相互接通的请求 \(a,b\) 在某一层分别接了上下两个开关,那么接下来它们永远也无法接通了,因为上下两个开关是 ...

  7. python——关变量下划线叙述

    _xx:前置单下划线,私有化属性或方法,一般来讲,变量名_xx被看作是"私有 的",在模块或类外不可以使用.当变量是私有的时候,用_xx 来表示变量是很好的习惯.类对象和子类可以访 ...

  8. 64-Unique Binary Search Trees

    96. Unique Binary Search Trees My Submissions Question Editorial Solution Total Accepted: 82788 Tota ...

  9. 非线性回归支持向量机——MATLAB源码

    支持向量机和神经网络都可以用来做非线性回归拟合,但它们的原理是不相同的,支持向量机基于结构风险最小化理论,普遍认为其泛化能力要比神经网络的强.大量仿真证实,支持向量机的泛化能力强于神经网络,而且能避免 ...

  10. 【模板】二分图最大权完美匹配(KM算法)/洛谷P6577

    题目链接 https://www.luogu.com.cn/problem/P6577 题目大意 给定一个二分图,其左右点的个数各为 \(n\),带权边数为 \(m\),保证存在完美匹配. 求一种完美 ...