今天在使用 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. [cf1290D]Coffee Varieties

    思路 统计数的种类数,也等价于统计有多少个数满足其之前没有与其相同的数 将序列以$\frac{k}{2}$为块大小分块,那么即会有$m=\frac{2n}{k}$个块 (关于$k=1$的情况,以1为块 ...

  2. [GYCTF2020]Easyphp

    知识点 反序列化pop链 反序列化字符逃逸 解题过程 www.zip 备份文件获取源码 审计代码构造pop链 <?php Class UpdateHelper{ public $id; publ ...

  3. 你真的知道Spring注解驱动的前世今生吗?这篇文章让你豁然开朗!

    本篇文章,从Spring1.x到Spring 5.x的迭代中,站在现在的角度去思考Spring注解驱动的发展过程,这将有助于我们更好的理解Spring中的注解设计. Spring Framework ...

  4. 关于uni-app导航栏中 中间大图标的设置

    在uni-app的开发过程中,想要将位于中间的图标设置更大,通过一般的更改导航栏图标大小方式实现不了.经过查看官方文档可以发现,我们可以通过midbutton来设置中间tabbar的样式. 但前提是, ...

  5. linux 同时执行多个命令及几个基础命令

    先后不同的命令用分号:隔开即可 基础命令: 1.cd 进入目录 /代表根目录,.代表当前目录,..代表上一级目录 2.ls 显示当前目录下的所有文件和文件夹 -F区分目录和文件,文件后边是*代表可执行 ...

  6. 藏书馆App基于Rainbond实现云原生DevOps的实践

    我们需要的不是精通Kubernetes的工程师,我们需要一款小白都能用好的管理工具. -- 厦门正观易知科技有限公司运维负责人 郭传壕 大家好,我是厦门正观易知科技有限公司运维负责人郭传壕. 藏书馆是 ...

  7. 洛谷 P5897 - [IOI2013]wombats(决策单调性优化 dp+线段树分块)

    题面传送门 首先注意到这次行数与列数不同阶,列数只有 \(200\),而行数高达 \(5000\),因此可以考虑以行为下标建线段树,线段树上每个区间 \([l,r]\) 开一个 \(200\times ...

  8. nmap相关

    nmap -sT IP-sT(全链接扫描),获取目标IP+PORT的状态,其实是发了三个包:SYN,SYN/ACK,ACK,类似于TCP三次握手 状态: open 开放的 closed 关闭的 fil ...

  9. 使用FastqCount统计fastq文件基本信息?

    目录 1. FastqCount简介 2. 使用 3. 结果 1. FastqCount简介 快速实用小工具:FastqCount https://github.com/zhimenggan/Fast ...

  10. 查看nginx(Web网页服务器)状态是否正常

    Linux每个应用运行都会产生一个进程,那么我们就可以通过查看Nginx进程是否存在来判断它是否启动. 1.有时想知道nigix是否在正常运行,需要用linux命令查看nginx运行情况.执行命令:p ...