element-ui中使用font-awesome字体图标
element-ui提供的字体图标是很少的,所以我们需要集成其它图标来使用,nodejs的集成官方有说明,这里说明一下非nodejs开发集成图标
首先下载fontawesome,需要更改里面图标前缀,附件中已经更改了,可以直接用
附件下载:fontawesome.zip
引用代码如下:
<link href="/your-path/font-awesome.min.css" rel="stylesheet" type='text/css' />
<style type="text/css">
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome!important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
使用如下:
<i class="fa el-icon-fa-firefox"></i>
<i class="el-icon-fa-hand-o-right"></i>
<el-input icon="fa-tree"></el-input>
element-ui中使用font-awesome字体图标的更多相关文章
- Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标
文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- Font Awesome字体图标
1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- Vue + Element UI 实现权限管理系统(第三方图标库)
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- 扩展layui中的自带字体图标
项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...
- (22)bootstrap 初识 + Font Awesome(字体图标库)
bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件 <link rel=&qu ...
- MVC.NET 发布后,部署到iis ,网站中的Bootstrap的字体图标不能正常显示
时隔多日没有在博客中记录自己遇到的问题及解决方案了 ,今天给大家分享一个可能会遇到的一个鸡肋bug ! 如果你的项目是MVC并且在项目中引用了 Boostrap 框架,你在编辑发布后部署到iis的时候 ...
随机推荐
- 1.python的一些规范
Python的一些规范 1.标识符 定义:允许作为名字的有效字符串集合 名字必须有实际意义,可读性好 首字母必须是字母或下划线(_) 剩下的字符可以是字母和数字或者下划线 大小写敏感 两种风格:con ...
- 一个Unix内核级别漏洞(一)
翻译原创稿件,prison整理翻译,首发ichunqiu,原地址:http://lsd-pl.net/kernelvuln.pdf 这是一篇关于Unix内核级别漏洞的paper,由某团队发布在一次黑客 ...
- JMeter基础:请求参数Parameters 、Body Data的区别
使用Jmeter测试时,很多人不知道请求参数Parameters .Body Data的区别和用途,这里简单介绍下 先了解一个接口的基本概念 在客户机和服务器之间进行请求-响应时,HTTP协议中包括G ...
- Django的常用方法以及配置
在setting 中配置能生成 sql log 的内容 LOGGING = { , 'disable_existing_loggers': False, 'handlers': { 'console ...
- git常用的命令你知道有哪些?
1.git与svn的区别 1,git是目前世界上最先进的分布式版本控制系统,他没有中央服务器,每个人的电脑就是一个完整的版本库,这样,工作的时候不需要联网 2,svn是集中式版本控制系统,版本库是集中 ...
- js05
继续学习js,在这里我们主要讲述一下js的BOM(浏览器对象模型)以及一些js库和应用这些js库的方法. 1.浏览器对象模型(BOM): window对象: 表示浏览器窗口,所有的 ...
- Java之IO(三)ByteArrayInputStream和ByteArrayOutputStream
转载请注明源出处:http://www.cnblogs.com/lighten/p/6972297.html 1.前言 这组输入输出流比较特殊,一般的流指定都是磁盘IO和网络IO,从文件中读取数据或者 ...
- CS231n学习笔记-图像分类笔记(上篇)
原文地址:智能单元 图像分类:所谓图像分类问题,就是已有固定的分类标签集合,然后对于输入的图像按照标签类别,将其打上标签. 下面先介绍一下一个简单的图像如何利用计算机进行分类: 例子:以下图为例,图像 ...
- spring 接收前台ajax传来的参数的几个方法
知识补充 JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串JSON.parse(), 将JSON数据解析为js原生值 ...
- RSNAKE 的 Slowloris DOS攻击工具初试
Slowloris 号称低带宽对服务器进行DDOS攻击 原理就是对WEB服务器发送 不完整的包并且以 单一 \r\n结尾,并不是 完整的HTTP包.造成WEB服务器堵塞达到最大连接数. 官网给出介绍 ...