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. 爱之箭发射（las）

    爱之箭发射(las) 目描述 小海是弓道部的成员,非常擅长射箭(Love Arrow Shoot).今天弓道部的练习是要射一棵树.一棵树是一个nn个点n−1n−1条边的无向图,且这棵树的第ii个点有一 ...

  2. ionic2 解决白屏问题

    ionic2下创建项目后,运行启动页后白屏几秒,解决方案 问题描述 最近在学习过程中发现ionic2项目运行在真机上,启动页后会有3-5秒的白屏时间,用户体验不是太好. 解决过程 查看到了一篇关于这个 ...

  3. 关于微信小程序post请求数据的坑

    在post请求数据的时候,发现数据没有发送给后台,需要在请求头里加"Content-Type": "application/x-www-form-urlencoded&q ...

  4. 鼠标放在预览图a.gif上，旁边有放大图出现

    原文发布时间为:2009-04-23 -- 来源于本人的百度文章 [由搬家工具导入] <html><script type="text/javascript"&g ...

  5. [LeetCode] Compare Version Numbers 字符串操作

    Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...

  6. 获取当前应用程序实例（instance:HINSTANCE）（转）

    if using MFC AfxGetInstanceHandle(). For console programs, call GetConsoleWindow() to get the HWND t ...

  7. AC日记——封锁阳光大学 洛谷 P1330

    封锁阳光大学 思路: bfs染色: 如果当前点能通往已染色的点则不能完成: 图不一定联通: 来,上代码: #include <queue> #include <cstdio> ...

  8. python 编码问题之终极解决

    结合之前遇到的坑以及下面贴的这篇文章, 总结几种python乱码解决方案,如果遇到乱码,不妨尝试一下? 1,必备 #encoding=utf-8 2, python编程环境编码 import sys ...

  9. RabbitMq解决分布式事物

    一.RabbitMQ解决分布式事务思路: 案例: 经典案例,以目前流行点外卖的案例,用户下单后,调用订单服务,让后订单服务调用派单系统通知送外卖人员送单,这时候订单系统与派单系统采用MQ异步通讯. 二 ...

  10. shell实现自动备份整个数据库,一个库备份一个文件

    自动实现备份整个数据库 实现一个库备份一个文件 实现排除不需要备份的库 实现备份成压缩文件 实现定义保留多少天的备份文件 核心代码 #!/bin/bash #set -x ############## ...