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图标的更多相关文章

  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. spring framework 第一章数据库管理（data access）

    spring data access 的网址:https://docs.spring.io/spring/docs/current/spring-framework-reference/index.h ...

  2. CSS3 loading 和 文字颜色渐变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Jmeter中之各种乱码问题解决方案

    一.Jmeter中之请求乱码问题 如果你参数化的数据是中文,那么应该怎么解决这个问题呢? 1.在脚本的参数接设置数据的接收编码为UTF-8,如下图,这里只保证请求参数的不乱码. 2.从本地txt文件中 ...

  4. struts2 针对类型转换出错的处理

    在类型转换出错时,需要在页面上显示友好提示: 类型转换出错时,会抛出一个运行时异常,程序会根据建立的属性文件,显示相应的错误提示. 实现方法: 1)新建局部属性文件或者全局属性文件 局部属性文件:放置 ...

  5. vuec常用插件

    1.  实现下拉刷新和下拉加载效果 iscroll-probe.js 2.手势密码插件 patternLock.js 3.实现复制 clipboard.min.js

  6. winfrom 多线程 并发 和定时任务

    static void Main(string[] args) { //多个线程修改同一个值,使用lock锁解决并发 for (int i = 0; i < 4; i++) { Task.Fac ...

  7. 「 HDU 1978 」 How many ways

    # 解题思路 记忆化搜索 一个点可以跳到的点,取决于它现在的能量.而且有一个显而易见的性质就是一条可行路径的终点和起点的横坐标之差加上纵坐标之差肯定小于等于起点的能量. 因为跳到一个点之后,能量和之前 ...

  8. HDU—4463 Outlets 最小生成树

    In China, foreign brand commodities are often much more expensive than abroad. The main reason is th ...

  9. 笔试算法题（15）：-1到N中包含1的数字的个数 & 连续和为N的序列

    出题:输入一个整数N,求从1到N这N个整数的十进制表示中‘1’出现的次数: 分析: 从左向右处理string表示的数字:当前数字长度为n,判断最左边一位数字字符: 如果是0,则直接递归下一位: 如果是 ...

  10. [Python3网络爬虫开发实战] 6.3-Ajax结果提取

    这里仍然以微博为例,接下来用Python来模拟这些Ajax请求,把我发过的微博爬取下来. 1. 分析请求 打开Ajax的XHR过滤器,然后一直滑动页面以加载新的微博内容.可以看到,会不断有Ajax请求 ...