Layui图标
layui 图标
layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。
学习链接:Layui字体图标
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>HelloWorld</title>
- <style type="text/css">
- .b{
- background-color:pink;
- }
- .b2{
- background-color: green;
- }
- </style>
- </head>
- <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css">
- <body style="padding: 50px">
- <i class="layui-icon layui-icon-face-smile"></i>
- <i class="layui-icon layui-icon-home" style="font-size: 30px; color: #1E9FFF;"></i>
- <script src="/LayuiTest/layui/layui.js"></script>
- </body>
- </html>
Layui图标的更多相关文章
- Layui - Xtree 3.0 http://acmeworker.com/BlogContent?type=1038
2018年1月11日升级 Layui - Xtree 3.0 此版本包含了前两个版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以直接抛弃啦!本次升级改动较多,参数也有所更改,尽量别直 ...
- zTab layui多标签页组件
zTab zTab是一个layui多标签页插件,仿照了layuiAdmin的iframe版Tab实现 当前版本v1.0 码云地址:https://gitee.com/sushengbuyu/zTab ...
- layuiu按钮
1.关于layui图标 唯一要提的是这是一个矢量图标 因此可以像对待文字一样加上style = font-size 以及color属性 eg: <i class="layui-ico ...
- 扩展layui中的自带字体图标
项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...
- layui 自定义字体图标 扩展
layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标 ...
- Layui 解决动态图标不动的问题
<i class="layui-icon layui-icon-face-smile" style="color: red; font-size: 100px;&q ...
- layui topbar图标(即返回顶部)未显示的解决方法
在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...
- Spring Boot使用layui的字体图标时无法正常显示 解决办法
在html文件使用字体图标并且预览时正常,但是启动工程后显示不正常,浏览器调试界面显示字体文件无法decode: Failed to decode downloaded font: xxxxx 如图所 ...
- layui数据表格排序图标被超出的表头挤出去
如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了, 效果如下 解决办法就是给图标加定位,过长的时候加上 .show-sort{ position: absolute; right ...
随机推荐
- BootStrap Select2组件
想使用Select2组件必须引用:select2.min.css和select2.min.js两个文件:如下: 页面写法很简单: 在这里多选是没有搜索功能的,只有单选的时候才会有搜索功能. Selec ...
- Thinkphp3.23 连接MSSQL方法
Thinkphp 3.23要连接MSSQL,必须配置下,以下是主要的步骤. 1.要安装Microsoft Drivers for PHP for SQL Server驱动 下载驱动以前,要查看一下ph ...
- spark 学习路线及参考课程
一.Scala编程详解: 第1讲-Spark的前世今生 第2讲-课程介绍.特色与价值 第3讲-Scala编程详解:基础语法 第4讲-Scala编程详解:条件控制与循环 第5讲-Scala编程详解:函数 ...
- struts2的action是线程安全的,struts1的action不是线程安全的真正原因
为什么struts2的action是线程安全的,struts1的action不是线程安全的? 先对struts1和struts2的原理做一个简单的讲解 对于struts1 ,当第一次**.do的请求过 ...
- mysql-oracle
1.oracle数据崩导入时部分字段数据太长导入失败:原因是两边oracle字符集不一致 https://www.cnblogs.com/baoposhou/p/5669778.html 2.orac ...
- Android(java)学习笔记194:ContentProvider使用之获得系统联系人信息02(掌握)
1.重要: 系统删除一个联系人,默认情况下并不是把这个联系人直接删除掉了,只是做了一个标记,标记为被删除. 2.前面一讲说过了如何获取系统联系人信息(通过ContentProvider),获取联系人信 ...
- 类方法__setattr__,__delattr__,__getattr__
__getattr__,_delattr_,_getattr_ class Foo: x = 1 def __init__(self, y): self.y = y def __getattr__(s ...
- XML和JSON
XML XML(EXtensible Markup Language),可扩展标记语言 特点 XML与操作系统.编程语言的开发平台无关 实现不同系统之间的数据交换 作用: 数据交互 配置应用程序和网站 ...
- vue工程化
很多人在玩完了官方文档的小例子之后,又不知道如何下手了.所以我这边帮大家把断层补上.大家首先要把vue的基本语法都熟悉了,然后再来这边学习. 有了前面webpack的铺垫,我们直接从vue的工程化开始 ...
- js 上传图片、压缩、旋转
亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...