layui字体图标

简介: 字体图标layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。

字体图标

layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

使用方式

通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 font-class(注意:layui 2.3.0 之前只支持采用 unicode 字符),即可显示出你想要的图标,比如:

   

注意:在 layui 2.3.0 之前的版本,只能设置 unicode 来定义图标
       
其中的  即是图标对应的 unicode 字符

你可以去定义它的颜色或者大小,如:

140种图标:





极客大全

目录
相关文章
|
数据库 数据安全/隐私保护
LayUI之树形菜单的实现
LayUI之树形菜单的实现
109 0
|
前端开发 Java 开发者
LayUI系列(二)之树形菜单的实现
LayUI系列(二)之树形菜单的实现
|
JSON Java 数据库
LayUI之动态树实现
LayUI之动态树实现
57 0
|
JavaScript
【layui】图片查看器
【layui】图片查看器
430 0
【layui】图片查看器
|
5月前
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
|
前端开发 数据格式
layui_02动态树
layui_02动态树
70 0
|
前端开发 数据可视化 JavaScript
Layui实现树形菜单(超详细)
Layui实现树形菜单(超详细)
211 0
|
前端开发 Java 开发者
LayUI之树形菜单
LayUI之树形菜单
88 0
|
前端开发 Java 数据库
LayUI之动态树
LayUI之动态树
59 0
|
JSON 前端开发 JavaScript
Layui动态树详解
Layui动态树详解
97 0