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. [SCOI2011][bzoj2331] 地板 [插头dp]

    题面: 传送门 思路: 插头dp基础教程 这个L形......第一眼看上去真的是丧病啊 但是仔细想想,实际上也就是拿一堆路径铺满一个棋盘,这个路径还是有限制的 那还有什么好说的,插头dp上啊[雾] 首 ...

  2. BZOJ2121 字符串游戏 【dp】

    题目链接 BZOJ2121 题解 dp怎么那么神呐QAQ 我们要求出最小字符串长度 我们设一个\(dp[i]\)表示前\(i\)个字符最后所形成的最短字符串长度 对于第\(i\)个字符,要么保留,就是 ...

  3. Write with Vim (1)

    Write with Vim (1) 本文出自Svitter的blog 原文在之前的也曾发表 大约在一年前使用vim?这个也是个不确定的时间.具体什么时间使用Vim早已经忘记了. 现在用的还算顺手,但 ...

  4. py2exe error: [Errno 2] No such file or directory: 'MSVCP90.dll'

    使用 python setup.py py2exe 打包时出现 py2exe error: [Errno 2] No such file or directory: 'MSVCP90.dll' 解决方 ...

  5. 使用PropTypes进行类型检测

    PropTypes 是react提供的用于检验数据类型的typechecking,避免应用越来越大的时候出现意料之外的bug class Greeting extends React.Componen ...

  6. POJ2771 Guardian of Decency

    Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5513   Accepted: 2319 Description Frank ...

  7. Named Formats!

    原文发布时间为:2011-06-26 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Text;using System.Web;using Sys ...

  8. Java中的IO基本用法

    先贴一下我在作业中用到的三种文件输入辅助类.三种文件输出辅助类 public class BuffIn implements InHelp{ private BufferedReader buffer ...

  9. linux内核情景分析之匿名管道

    管道的机制由pipe()创建,由pipe()所建立的管道两端都在同一进程.所以必须在fork的配合下,才可以在具有亲缘关系的进程通信 /* * sys_pipe() is the normal C c ...

  10. abstract抽象类和interface接口

    一.抽象类 1.抽象类不能实例化,因为有抽象方法未实现 2.可以被抽象类或非抽象类继承 3.但不是只能被继承,还可以直接拿来使用的,当然,这个使用是拿来声明,反例如下: public abstract ...