layui官网下载：GitHub：https://github.com/sentsin/layui/

layui官网首页-下载：http://www.layui.com/

layui-字体图标-官方网站：http://www.layui.com/doc/element/icon.html

Layui的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个icon看作是一个普通的文字，这意味着你直接用css控制文字属性，如color、font-size，就可以改变图标的颜色和大小。而区分不同的图标，我们主要是采用 Unicode 字符

使用:（引入需要的文件）
通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 Unicode 字符，即可显示出你想要的图标，譬如：

<i class="layui-icon"></i>

其中的  即是图标对应的Unicode字符

你可以去定义它的颜色或者大小，如：

<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="build/css/layui.css"/>

        <!--<link rel="stylesheet" type="text/css" href="build/css/layui.mobile.css"/>-->

    </head>

    <body>

        <i class="layui-icon" style="font-size: 30px; color: red;"></i>

        <script src="js/jquery-2.1.0.js"></script>

        <script src="build/layui.js"></script>

    </body>

</html>

输出为：

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

layui-字体图标的更多相关文章

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

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

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

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

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

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

  4. 初学者--bootstrap（六）组件中的字体图标----在路上（9）

    组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...

  5. 如何使用IconFont字体图标代替网页图片？

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  6. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一．图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  7. Bootstrap之字体图标

    优点:1.减少请求 2.容易控制样式 所在位置:在下载的bootstrap文件中的fonts文件夹存放字体图标 默认路径为当前目录下,如需修改路径,则需在bootstrap.css中查找font-fa ...

  8. Glyphicon 字体图标

    Bootstrap中的Glyphicon 字体图标 在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效 ...

  9. Bootstrap<基础十一>字体图标(Glyphicons)

    字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本 ...

  10. bootstraps字体图标无法显示

    使用bootstraps字体图标,必须在css的同级文件夹下,建立新的文件夹为fonts,放入一下文件. 在还是无法显示字体图标的情况下,可查看bootstraps.css中的 @font-face ...

随机推荐

  1. 觉醒力量 （hidpower）

    觉醒力量 (hidpower) 题目描述 [题目背景] 从前有一款非常火的游戏被人们称为pokemon,从最初的红绿蓝黄版直到现在的XY版,都受到世界各地小朋友和大朋友们的喜爱. [题意描述] 作为一 ...

  2. 【VBA】标准Sub/Function定义，带ScreenUpdating、On Error GoTo

    [说明] 标准Sub/Function定义,带ScreenUpdating.On Error GoTo Sub AutoFillRole() '--------------- ERROR MSG--- ...

  3. js 如何生成一个不重复的ID的函数

    在MongoDB中的ObjectID,可以理解为是一个不会重复的ID,这里有个链接http://www.jb51.net/article/101164.htm感兴趣可以去研究一下. 我今天要做的就是做 ...

  4. 关于 react state的改变数据上面的一点问题

    在react当中 比如说 this.state = { loginInfo: { account: "...", password: "..." } } thi ...

  5. 【04】react 之 复合组件

    1.1.  什么是组件? 前端开发中组件也称为UI组件,组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分.UI组件包含了这样一个或几个具有各自功能的代码段,最终完成了用户界面的表示.R ...

  6. cf 487E Tourist

    题目大意 给定\(n\)个点\(m\)条边的无向连通图,无重边 每个点有点权 两个操作: 1.单点点权修改 2.询问从x到y的简单路径中,路径经过点的最小值的最小值时多少 (简单路径指经过每一个点至多 ...

  7. T-SQL还有个内置方法NULLIF()

    declare @cypic varchar if (NULLIF(@cypic, '') IS NOT NULL) begin print 1 end else begin print 2 end ...

  8. GridView 动态绑定控件 OnRowCommand事件触发

    主题:GridView动态生成的控件不能触发OnRowCommand事件,且点击控件按钮后,控件的值会消失. 案例, 由于公司需要绑定的数据列顺序是动态生成的,且有的数据列需要绑定Button控件.所 ...

  9. poj 3254 Corn Fields 状压dp入门

    题目链接 题意 在\(M\times N\)的\(0,1\)格子上放东西,只有标记为\(1\)的格子可以放东西,且相邻的格子不能同时放东西.问有多少种放法. 思路 参考:swallowblank. \ ...

  10. [SaltStack] Salt高可用和负载均衡部署

    Saltstack HA部署 Salt官网是有HA/Rebalance/failover解决方案的, 但版本必须是2014.7, 目前该版本还没有release, 从官网下载的源码包安装使用测试起来一 ...