字体图标
layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。
引入layui全局类库
使用方式
通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，譬如：
从 layui 2.3.0 开始，支持 font-class 的形式定义图标：
注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标
其中的 即是图标对应的 unicode 字符
你可以去定义它的颜色或者大小，如：
内置图标一览表（168个）
实心
layui-icon-heart-fill
空心
layui-icon-heart
亮度/晴
layui-icon-light
时间/历史
layui-icon-time
蓝牙
layui-icon-bluetooth
@艾特
layui-icon-at
静音
layui-icon-mute
录音/麦克风
layui-icon-mike
密钥/钥匙
layui-icon-key
礼物/活动
layui-icon-gift
邮箱
layui-icon-email
RSS
layui-icon-rss
WiFi
layui-icon-wifi
退出/注销
layui-icon-logout
Android 安卓
layui-icon-android
Apple IOS 苹果
layui-icon-ios
Windows
layui-icon-windows
穿梭框
layui-icon-transfer
客服
layui-icon-service
减
layui-icon-subtraction
加
layui-icon-addition
滑块
layui-icon-slider
打印
layui-icon-print
导出
layui-icon-export
列
layui-icon-cols
退出全屏
layui-icon-screen-restore
全屏
layui-icon-screen-full
半星
layui-icon-rate-half
星星-空心
layui-icon-rate
星星-实心
layui-icon-rate-solid
手机
layui-icon-cellphone
验证码
layui-icon-vercode
微信
layui-icon-login-wechat
layui-icon-login-qq
微博
layui-icon-login-weibo
密码
layui-icon-password
用户名
layui-icon-username
刷新-粗
layui-icon-refresh-3
授权
layui-icon-auz
左向右伸缩菜单
layui-icon-spread-left
右向左伸缩菜单
layui-icon-shrink-right
雪花
layui-icon-snowflake
提示说明
layui-icon-tips
便签
layui-icon-note
主页
layui-icon-home
高级
layui-icon-senior
刷新
layui-icon-refresh
刷新
layui-icon-refresh-1
旗帜
layui-icon-flag
主题
layui-icon-theme
消息-通知
layui-icon-notice
网站
layui-icon-website
控制台
layui-icon-console
表情-惊讶
layui-icon-face-surprised
设置-空心
layui-icon-set
模板
layui-icon-template-1
应用
layui-icon-app
模板
layui-icon-template
赞
layui-icon-praise
踩
layui-icon-tread
男
layui-icon-male
女
layui-icon-female
相机-空心
layui-icon-camera
相机-实心
layui-icon-camera-fill
菜单-水平
layui-icon-more
菜单-垂直
layui-icon-more-vertical
金额-人民币
layui-icon-rmb
金额-美元
layui-icon-dollar
钻石-等级
layui-icon-diamond
火
layui-icon-fire
返回
layui-icon-return
位置-地图
layui-icon-location
办公-阅读
layui-icon-read
调查
layui-icon-survey
表情-微笑
layui-icon-face-smile
表情-哭泣
layui-icon-face-cry
购物车
layui-icon-cart-simple
购物车
layui-icon-cart
下一页
layui-icon-next
上一页
layui-icon-prev
上传-空心-拖拽
layui-icon-upload-drag
上传-实心
layui-icon-upload
下载-圆圈
layui-icon-download-circle
组件
layui-icon-component
文件-粗
layui-icon-file-b
用户
layui-icon-user
发现-实心
layui-icon-find-fill
loading
layui-icon-loading
loading
layui-icon-loading-1
添加
layui-icon-add-1
播放
layui-icon-play
暂停
layui-icon-pause
音频-耳机
layui-icon-headset
视频
layui-icon-video
语音-声音
layui-icon-voice
消息-通知-喇叭
layui-icon-speaker
删除线
layui-icon-fonts-del
代码
layui-icon-fonts-code
HTML
layui-icon-fonts-html
字体加粗
layui-icon-fonts-strong
删除链接
layui-icon-unlink
图片
layui-icon-picture
链接
layui-icon-link
表情-笑-粗
layui-icon-face-smile-b
左对齐
layui-icon-align-left
右对齐
layui-icon-align-right
居中对齐
layui-icon-align-center
字体-下划线
layui-icon-fonts-u
字体-斜体
layui-icon-fonts-i
Tabs 选项卡
layui-icon-tabs
单选框-选中
layui-icon-radio
单选框-候选
layui-icon-circle
编辑
layui-icon-edit
分享
layui-icon-share
删除
layui-icon-delete
表单
layui-icon-form
手机-细体
layui-icon-cellphone-fine
聊天 对话 沟通
layui-icon-dialogue
文字格式化
layui-icon-fonts-clear
窗口
layui-icon-layer
日期
layui-icon-date
水 下雨
layui-icon-water
代码-圆圈
layui-icon-code-circle
轮播组图
layui-icon-carousel
翻页
layui-icon-prev-circle
布局
layui-icon-layouts
工具
layui-icon-util
选择模板
layui-icon-templeate-1
上传-圆圈
layui-icon-upload-circle
树
layui-icon-tree
表格
layui-icon-table
图表
layui-icon-chart
图标 报表 屏幕
layui-icon-chart-screen
引擎
layui-icon-engine
下三角
layui-icon-triangle-d
右三角
layui-icon-triangle-r
文件
layui-icon-file
设置-小型
layui-icon-set-sm
减少-圆圈
layui-icon-reduce-circle
添加-圆圈
layui-icon-add-circle
404
layui-icon-404
关于
layui-icon-about
箭头 向上
layui-icon-up
箭头 向下
layui-icon-down
箭头 向左
layui-icon-left
箭头 向右
layui-icon-right
圆点
layui-icon-circle-dot
搜索
layui-icon-search
设置-实心
layui-icon-set-fill
群组
layui-icon-group
好友
layui-icon-friends
回复 评论 实心
layui-icon-reply-fill
菜单 隐身 实心
layui-icon-menu-fill
记录
layui-icon-log
图片-细体
layui-icon-picture-fine
表情-笑-细体
layui-icon-face-smile-fine
列表
layui-icon-list
发布 纸飞机
layui-icon-release
对 OK
layui-icon-ok
帮助
layui-icon-help
客服
layui-icon-chat
top 置顶
layui-icon-top
收藏-空心
layui-icon-star
收藏-实心
layui-icon-star-fill
关闭-实心
ဇ
layui-icon-close-fill
关闭-空心
ဆ
layui-icon-close
正确
စ
layui-icon-ok-circle
添加-圆圈-细体
layui-icon-add-circle-fine
跨域问题的解决
由于浏览器存在同源策略，所以如果 layui（里面含图标字体文件）所在的地址与你当前的页面地址不在同一个域下，即会出现图标跨域问题。所以要么你就把 layui 与网站放在同一服务器，要么就对 layui 所在的资源服务器的 Response Headers 加上属性：Access-Control-Allow-Origin: *
layui - 在每一个细节中，用心与你沟通