layui 图标

　　layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

学习链接：Layui字体图标

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>HelloWorld</title>
  6.  <style type="text/css">
  7.      .b{
  8.          background-color:pink;
  9.      }
  10.      .b2{
  11.          background-color: green;
  12.      }
  13.  </style>
  14.  </head>
  15.  <link rel="stylesheet" href="/LayuiTest/layui/css/layui.css">
  16.  <body style="padding: 50px">
  17.  <i class="layui-icon layui-icon-face-smile"></i>
  18.  <i class="layui-icon layui-icon-home" style="font-size: 30px; color: #1E9FFF;"></i>
  19.  <script src="/LayuiTest/layui/layui.js"></script>
  20.  </body>
  21.  </html>

Layui图标的更多相关文章

  1. Layui - Xtree 3.0 http://acmeworker.com/BlogContent?type=1038

    2018年1月11日升级 Layui - Xtree 3.0 此版本包含了前两个版本所有的功能,同时修复了一些问题,增加了一些功能,之前的版本可以直接抛弃啦!本次升级改动较多,参数也有所更改,尽量别直 ...

  2. zTab layui多标签页组件

    zTab zTab是一个layui多标签页插件,仿照了layuiAdmin的iframe版Tab实现 当前版本v1.0 码云地址:https://gitee.com/sushengbuyu/zTab ...

  3. layuiu按钮

    1.关于layui图标 唯一要提的是这是一个矢量图标 因此可以像对待文字一样加上style = font-size  以及color属性 eg: <i class="layui-ico ...

  4. 扩展layui中的自带字体图标

    项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...

  5. layui 自定义字体图标 扩展

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标 ...

  6. Layui 解决动态图标不动的问题

    <i class="layui-icon layui-icon-face-smile" style="color: red; font-size: 100px;&q ...

  7. layui topbar图标（即返回顶部）未显示的解决方法

    在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...

  8. Spring Boot使用layui的字体图标时无法正常显示 解决办法

    在html文件使用字体图标并且预览时正常,但是启动工程后显示不正常,浏览器调试界面显示字体文件无法decode: Failed to decode downloaded font: xxxxx 如图所 ...

  9. layui数据表格排序图标被超出的表头挤出去

    如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了, 效果如下 解决办法就是给图标加定位,过长的时候加上 .show-sort{ position: absolute; right ...

随机推荐

  1. BootStrap Select2组件

    想使用Select2组件必须引用:select2.min.css和select2.min.js两个文件:如下: 页面写法很简单: 在这里多选是没有搜索功能的,只有单选的时候才会有搜索功能. Selec ...

  2. Thinkphp3.23 连接MSSQL方法

    Thinkphp 3.23要连接MSSQL,必须配置下,以下是主要的步骤. 1.要安装Microsoft Drivers for PHP for SQL Server驱动 下载驱动以前,要查看一下ph ...

  3. spark 学习路线及参考课程

    一.Scala编程详解: 第1讲-Spark的前世今生 第2讲-课程介绍.特色与价值 第3讲-Scala编程详解:基础语法 第4讲-Scala编程详解:条件控制与循环 第5讲-Scala编程详解:函数 ...

  4. struts2的action是线程安全的，struts1的action不是线程安全的真正原因

    为什么struts2的action是线程安全的,struts1的action不是线程安全的? 先对struts1和struts2的原理做一个简单的讲解 对于struts1 ,当第一次**.do的请求过 ...

  5. mysql-oracle

    1.oracle数据崩导入时部分字段数据太长导入失败:原因是两边oracle字符集不一致 https://www.cnblogs.com/baoposhou/p/5669778.html 2.orac ...

  6. Android（java）学习笔记194：ContentProvider使用之获得系统联系人信息02（掌握）

    1.重要: 系统删除一个联系人,默认情况下并不是把这个联系人直接删除掉了,只是做了一个标记,标记为被删除. 2.前面一讲说过了如何获取系统联系人信息(通过ContentProvider),获取联系人信 ...

  7. 类方法__setattr__,__delattr__,__getattr__

    __getattr__,_delattr_,_getattr_ class Foo: x = 1 def __init__(self, y): self.y = y def __getattr__(s ...

  8. XML和JSON

    XML XML(EXtensible Markup Language),可扩展标记语言 特点 XML与操作系统.编程语言的开发平台无关 实现不同系统之间的数据交换 作用: 数据交互 配置应用程序和网站 ...

  9. vue工程化

    很多人在玩完了官方文档的小例子之后,又不知道如何下手了.所以我这边帮大家把断层补上.大家首先要把vue的基本语法都熟悉了,然后再来这边学习. 有了前面webpack的铺垫,我们直接从vue的工程化开始 ...

  10. js 上传图片、压缩、旋转

    亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...