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. linux系统初始化——sysinit文件写法详解

    sysinit文件写法详解 sysinit文件是linux初始化文件系统时执行的第一个脚本文件.它主要做在各个运行级别中进行初始化工作,包括: 启动交换分区;检查磁盘;设置主机名;检查并挂载文件系统; ...

  2. Optimal Marks(optimal)

    Optimal Marks(optimal) 题目描述 定义无向图边的值为这条边连接的两个点的点权异或值. 定义无向图的值为无向图中所有边的值的和. 给定nn个点mm条边构成的图.其中有些点的权值是给 ...

  3. C++ 静态成员的类内初始化

    一般来说,关于C++类静态成员的初始化,并不会让人感到难以理解,但是提到C++ 静态成员的"类内初始化"那就容易迷糊了. 我们来看如下代码: //example.h #includ ...

  4. ios - 工具类

    这几天看项目,把俺旁边小哥哥的一个工具类相中了,希望对大家有所帮助哦~~~~~~~~~ // // PLZ_Tool.h // // Created by penglaizhi on 2017/7/3 ...

  5. 【转】linux之shfit

    位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...

  6. SQLite-FMDatabase用法

    FMDatabase用法 转载 http://blog.sina.com.cn/s/blog_94d94f1a01015gcr.html 以下是FMDB的一些基本使用,FMDB框架其实只是一层很薄的封 ...

  7. luogu 1258 小车问题 小学奥数(?)

    题目链接 题意 甲.乙两人同时从A地出发要尽快同时赶到B地.出发时A地有一辆小车,可是这辆小车除了驾驶员外只能带一人.已知甲.乙两人的步行速度一样,且小于车的速度.问:怎样利用小车才能使两人尽快同时到 ...

  8. 《手把手教你学C语言》学习笔记（5）---计算机的存储和访问

    数据存储是以“字节”(Byte)为单位,数据传输是以大多是以“位”(bit,又名“比特”)为单位,一个位就代表一个0或1(即二进制),每8个位(bit,简写为b)组成一个字节(Byte,简写为B),是 ...

  9. tkinter Scale滑块

    鼠标拖动和绑定鼠标滚轮移动: import threading from tkinter import * root = Tk() v = StringVar() s1 = Scale(root,fr ...

  10. Scala 封装可break和continue的foreach循环

    发现scala里没有break和continue, 有时候实在是需要的话就要自己try catch异常,代码看起来有点蛋疼, 所以封装了一个可break和continue的foreach. impor ...