字体图标
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阿里云万网流量耗尽关停页面