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. leetcode790 Domino and Tromino Tiling

    思路: dp.没有像discuss中的那样优化递推式. 实现: class Solution { public: ; int numTilings(int N) { vector<vector& ...

  2. 冒泡排序算法和简单选择排序算法的js实现

    之前已经介绍过冒泡排序算法和简单选择排序算法和原理,现在有Js实现. 冒泡排序算法 let dat=[5, 8, 10, 3, 2, 18, 17, 9]; function bubbleSort(d ...

  3. Prim算法以及Kruskal算法

    Prim算法主要用于计算最小生成树.算法在选取最小路径的时候需要优化,算法思路:从某个顶点开始,假设v0,此时v0属于最小生成树结点中的一个元素,该集合假设V,剩下的点待选择的点为U,然后找寻V中的点 ...

  4. R in action读书笔记（4）-第六章：基本图形（下）

    6.3直方图 hist() 其中的x是一个由数据值组成的数值向量.参数freq=FALSE表示根据概率密度而不是频数绘制图形.参数breaks用于控制组的数量.在定义直方图中的单元时,默认将生成等距切 ...

  5. 使用Jenkins进行android项目的自动构建（3）

    建立Jenkins项目 1. “新增作业”->填写作业名称->选择“建置 Maven 2 或 3 專案”->OK.新增成功后会进入“組態設定”,暂时先保留默认值,稍后再进行设定. 2 ...

  6. iOS中的蓝牙

    iOS中的蓝牙 概述 iOS中提供了4个框架用于实现蓝牙连接 1.GameKit.framework(用法简单) 只能用于iOS设备之间的同个应用内连接,多用于游戏(eg.拳皇,棋牌类),从iOS7开 ...

  7. SQL优化基础 使用索引（一个小例子）

    按照本文操作和体会,会对sql优化有个基本最简单的了解,其他深入还需要更多资料和实践的学习: 1. 建表: 复制代码代码如下: create table site_user ( id int IDEN ...

  8. 最好的Sublime Text插件集合

    阅读目录 WebInspector Emmet Git GitGutter & Modific Sublimall AllAutocomplete SublimeREPL DocBlockr ...

  9. chown - 修改文件所有者和组别

    总览 chown [options] user [:group] file... POSIX 选项: [-R] GNU 选项(最短格式): [-cfhvR] [--dereference] [--re ...

  10. 实训day01 python基础

    一.编程语言 编程语言:可以被计算机所识别的表达方式. 编程:程序员通过编程语言将自己的想法编写出来,产生的结果就是包含字符的文件. 其中,只有程序在运行时,其中的字符才有特定的语法意义. 二.计算机 ...