layui开发使用文档

巴西世界杯梅西

字体图标

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

使用方式

通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 Unicode 字符,即可显示出你想要的图标,譬如:

其中的  即是图标对应的Unicode字符

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

内置图标一览表(119个)

主页

相机-空心

相机-实心

菜单-水平

菜单-竖直

返回

Hot

等级

金额-人民币

金额-美元

位置

文档

检验

笑脸

哭脸

购物车1

购物车2

星级

上一页

下一页

上传-空心

上传-实心

文件夹

应用

播放

播放暂停

音乐

视频

语音

喇叭

对话

.duihua

设置

.shezhi

隐身-im

.yinshenim

搜索

.search

分享

.fenxiang1

刷新

loading

loading

设置

.shezhi1

引擎

.yinqing

阅卷错号

.yuejuancuohao

错-

.cuo

报表

.baobiao

star

.star

圆点

.yuandian

客服

.kefu

发布

.logo

21cake_list

.list

图表

.tubiao

正确

.right

换肤2

.huanfu2

在线

.On-line

右右

.youyou

左左

.zuozuo

表格

icon_树

.icon5

上传

.iconfont17

添加

.tianjia

下载

.xiazai

选择模版48

.xuanzemoban48

工具

.gongju

添加

编辑

删除

向下

.xiangxia

文件

.wenjian

布局

.layouts

对勾

.duigou

添加

.tianjia1

么么直播-翻页

.yaoyaozhibofanye

404

.404

轮播组图

.lunbozutu

help

.help

代码1

.daima1

进水

.jinshui

关于

.guanyu

向上

.xiangshang

日期

.riqi

文件

.wenjian1

top

.top

好友请求

.haoyouqingqiu

.weibiaoti1

窗口

.chuangkou

表情

.comiisbiaoqing

正确

.zhengque

我的好友

.iconfontwodehaoyou

文件下载

.wenjianxiazai

图片

.tupian

链接

.lianjie

记录

.jilu

文件夹

.liucheng

font-strikethrough

.fontstrikethrough

unlink

.unlink

编辑_文字

.bianjiwenzi

三角

.sanjiao

单选框-候选

.danxuankuanghouxuan

单选框-选中

.danxuankuangxuanzhong

居中对齐

.juzhongduiqi

右对齐

.youduiqi

左对齐

.zuoduiqi

勾选框(未打勾)

.gongsisvgtubiaozongji22

勾选框(已打勾)

.gongsisvgtubiaozongji23

加粗

.jiacu

聊天 对话 IM 沟通

.liaotianduihuaimgoutong

文件夹_反

.wenjianjiafan

手机

.shouji

表情

.biaoqing

html

.html

表单

.biaodan

tab

.25

emw_代码

.emwdaima

字体-下划线

.zitixiahuaxian

三角

.sanjiao1

图片

.tupian-copy-copy

斜体

.xieti

跨域问题的解决

由于浏览器存在同源策略,所以如果layui(里面含图标字体文件)所在的地址与你当前的页面地址不在同一个域下,即会出现图标跨域问题。所以要么你就把Layui与网站放在同一服务器,要么就对Layui所在的资源服务器的Response Headers加上属性:Access-Control-Allow-Origin: *

Layui - 用心与你沟通

如何在电脑上设置wifi
阿里云万网流量耗尽关停页面