字体图标

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 开始，支持 font-class 的形式定义图标：
<i class="layui-icon layui-icon-face-smile"></i>   
      
注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标
<i class="layui-icon">&#xe60c;</i>   
其中的 &#xe60c; 即是图标对应的 unicode 字符
       
 
你可以去定义它的颜色或者大小，如：
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
      

• 实心

  

  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

• QQ

  

  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 - 在每一个细节中，用心与你沟通