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. https总结

    http与https不能互相发送ajax请求,因为跨域了. http页面请求https静态资源可以,但是https请求http静态资源会提示错误. 总之,宽松的可以请求严格的,但是严格的不能请求宽松的 ...

  2. 浅谈 easyui tabs 的href和content属性

    众所周知,jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: ...

  3. windows杀死进程netstat

    1.找到端口被占用情况 netstat -aon|findstr "9050" 协议    本地地址                     外部地址               ...

  4. 分布式文件系统FastDFS集群部署

    1.源码开放下载地址:https://github.com/happyfish100 早期源码开放下载地址:https://sourceforge.net/projects/fastdfs/files ...

  5. pat 甲级 团体天梯 L3-004. 肿瘤诊断

    L3-004. 肿瘤诊断 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 在诊断肿瘤疾病时,计算肿瘤体积是很重要的一环.给定病灶 ...

  6. jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)

    今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...

  7. 802.11 MAC层

    1. 介绍 本文主要介绍了802.11 MAC层 2. 访问机制 CSMA/CA:  Carrier Sense Multiple Access with Collision Avoidance Wi ...

  8. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---14

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  9. C#图解教程学习笔记——转换

    一.什么是转换转换(conversion)是指接受一个类型的值并使用它作为另一个类型的等价值的过程.转换后的值应和源值是一样的,但其类型为目标类型. 二.隐式转换和显式转换(强制转换)1. 隐式转换( ...

  10. UVALive 3664:Guess(贪心 Grade E)

    vj题目链接 题意: 有n (n<16345)个人,每个人有三个数(小于1000且最多两位小数点),表示答对对应题的得分.规定总分越高的人rank越高.总分相同,id小的rank高.现在知道ra ...