- 使用方式
- 内置图标一览表
- 跨域问题的解决

-

# 字体图标

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>

内置图标一览表（168个）

- 实心
  &#xe68f;
  layui-icon-heart-fill
- 空心
  &#xe68c;
  layui-icon-heart
- 亮度/晴
  &#xe748;
  layui-icon-light
- 时间/历史
  &#xe68d;
  layui-icon-time
- 蓝牙
  &#xe689;
  layui-icon-bluetooth
- @艾特
  &#xe687;
  layui-icon-at
- 静音
  &#xe685;
  layui-icon-mute
- 录音/麦克风
  &#xe6dc;
  layui-icon-mike
- 密钥/钥匙
  &#xe683;
  layui-icon-key
- 礼物/活动
  &#xe627;
  layui-icon-gift
- 邮箱
  &#xe618;
  layui-icon-email
- RSS
  &#xe808;
  layui-icon-rss
- WiFi
  &#xe7e0;
  layui-icon-wifi
- 退出/注销
  &#xe682;
  layui-icon-logout
- Android 安卓
  &#xe684;
  layui-icon-android
- Apple IOS 苹果
  &#xe680;
  layui-icon-ios
- Windows
  &#xe67f;
  layui-icon-windows
- 穿梭框
  &#xe691;
  layui-icon-transfer
- 客服
  &#xe626;
  layui-icon-service
- 减
  &#xe67e;
  layui-icon-subtraction
- 加
  &#xe624;
  layui-icon-addition
- 滑块
  &#xe714;
  layui-icon-slider
- 打印
  &#xe66d;
  layui-icon-print
- 导出
  &#xe67d;
  layui-icon-export
- 列
  &#xe610;
  layui-icon-cols
- 退出全屏
  &#xe758;
  layui-icon-screen-restore
- 全屏
  &#xe622;
  layui-icon-screen-full
- 半星
  &#xe6c9;
  layui-icon-rate-half
- 星星-空心
  &#xe67b;
  layui-icon-rate
- 星星-实心
  &#xe67a;
  layui-icon-rate-solid
- 手机
  &#xe678;
  layui-icon-cellphone
- 验证码
  &#xe679;
  layui-icon-vercode
- 微信
  &#xe677;
  layui-icon-login-wechat
- QQ
  &#xe676;
  layui-icon-login-qq
- 微博
  &#xe675;
  layui-icon-login-weibo
- 密码
  &#xe673;
  layui-icon-password
- 用户名
  &#xe66f;
  layui-icon-username
- 刷新-粗
  &#xe9aa;
  layui-icon-refresh-3
- 授权
  &#xe672;
  layui-icon-auz
- 左向右伸缩菜单
  &#xe66b;
  layui-icon-spread-left
- 右向左伸缩菜单
  &#xe668;
  layui-icon-shrink-right
- 雪花
  &#xe6b1;
  layui-icon-snowflake
- 提示说明
  &#xe702;
  layui-icon-tips
- 便签
  &#xe66e;
  layui-icon-note
- 主页
  &#xe68e;
  layui-icon-home
- 高级
  &#xe674;
  layui-icon-senior
- 刷新
  &#xe669;
  layui-icon-refresh
- 刷新
  &#xe666;
  layui-icon-refresh-1
- 旗帜
  &#xe66c;
  layui-icon-flag
- 主题
  &#xe66a;
  layui-icon-theme
- 消息-通知
  &#xe667;
  layui-icon-notice
- 网站
  &#xe7ae;
  layui-icon-website
- 控制台
  &#xe665;
  layui-icon-console
- 表情-惊讶
  &#xe664;
  layui-icon-face-surprised
- 设置-空心
  &#xe716;
  layui-icon-set
- 模板
  &#xe656;
  layui-icon-template-1
- 应用
  &#xe653;
  layui-icon-app
- 模板
  &#xe663;
  layui-icon-template
- 赞
  &#xe6c6;
  layui-icon-praise
- 踩
  &#xe6c5;
  layui-icon-tread
- 男
  &#xe662;
  layui-icon-male
- 女
  &#xe661;
  layui-icon-female
- 相机-空心
  &#xe660;
  layui-icon-camera
- 相机-实心
  &#xe65d;
  layui-icon-camera-fill
- 菜单-水平
  &#xe65f;
  layui-icon-more
- 菜单-垂直
  &#xe671;
  layui-icon-more-vertical
- 金额-人民币
  &#xe65e;
  layui-icon-rmb
- 金额-美元
  &#xe659;
  layui-icon-dollar
- 钻石-等级
  &#xe735;
  layui-icon-diamond
- 火
  &#xe756;
  layui-icon-fire
- 返回
  &#xe65c;
  layui-icon-return
- 位置-地图
  &#xe715;
  layui-icon-location
- 办公-阅读
  &#xe705;
  layui-icon-read
- 调查
  &#xe6b2;
  layui-icon-survey
- 表情-微笑
  &#xe6af;
  layui-icon-face-smile
- 表情-哭泣
  &#xe69c;
  layui-icon-face-cry
- 购物车
  &#xe698;
  layui-icon-cart-simple
- 购物车
  &#xe657;
  layui-icon-cart
- 下一页
  &#xe65b;
  layui-icon-next
- 上一页
  &#xe65a;
  layui-icon-prev
- 上传-空心-拖拽
  &#xe681;
  layui-icon-upload-drag
- 上传-实心
  &#xe67c;
  layui-icon-upload
- 下载-圆圈
  &#xe601;
  layui-icon-download-circle
- 组件
  &#xe857;
  layui-icon-component
- 文件-粗
  &#xe655;
  layui-icon-file-b
- 用户
  &#xe770;
  layui-icon-user
- 发现-实心
  &#xe670;
  layui-icon-find-fill
- loading
  &#xe63d;
  layui-icon-loading
- loading
  &#xe63e;
  layui-icon-loading-1
- 添加
  &#xe654;
  layui-icon-add-1
- 播放
  &#xe652;
  layui-icon-play
- 暂停
  &#xe651;
  layui-icon-pause
- 音频-耳机
  &#xe6fc;
  layui-icon-headset
- 视频
  &#xe6ed;
  layui-icon-video
- 语音-声音
  &#xe688;
  layui-icon-voice
- 消息-通知-喇叭
  &#xe645;
  layui-icon-speaker
- 删除线
  &#xe64f;
  layui-icon-fonts-del
- 代码
  &#xe64e;
  layui-icon-fonts-code
- HTML
  &#xe64b;
  layui-icon-fonts-html
- 字体加粗
  &#xe62b;
  layui-icon-fonts-strong
- 删除链接
  &#xe64d;
  layui-icon-unlink
- 图片
  &#xe64a;
  layui-icon-picture
- 链接
  &#xe64c;
  layui-icon-link
- 表情-笑-粗
  &#xe650;
  layui-icon-face-smile-b
- 左对齐
  &#xe649;
  layui-icon-align-left
- 右对齐
  &#xe648;
  layui-icon-align-right
- 居中对齐
  &#xe647;
  layui-icon-align-center
- 字体-下划线
  &#xe646;
  layui-icon-fonts-u
- 字体-斜体
  &#xe644;
  layui-icon-fonts-i
- Tabs 选项卡
  &#xe62a;
  layui-icon-tabs
- 单选框-选中
  &#xe643;
  layui-icon-radio
- 单选框-候选
  &#xe63f;
  layui-icon-circle
- 编辑
  &#xe642;
  layui-icon-edit
- 分享
  &#xe641;
  layui-icon-share
- 删除
  &#xe640;
  layui-icon-delete
- 表单
  &#xe63c;
  layui-icon-form
- 手机-细体
  &#xe63b;
  layui-icon-cellphone-fine
- 聊天 对话 沟通
  &#xe63a;
  layui-icon-dialogue
- 文字格式化
  &#xe639;
  layui-icon-fonts-clear
- 窗口
  &#xe638;
  layui-icon-layer
- 日期
  &#xe637;
  layui-icon-date
- 水 下雨
  &#xe636;
  layui-icon-water
- 代码-圆圈
  &#xe635;
  layui-icon-code-circle
- 轮播组图
  &#xe634;
  layui-icon-carousel
- 翻页
  &#xe633;
  layui-icon-prev-circle
- 布局
  &#xe632;
  layui-icon-layouts
- 工具
  &#xe631;
  layui-icon-util
- 选择模板
  &#xe630;
  layui-icon-templeate-1
- 上传-圆圈
  &#xe62f;
  layui-icon-upload-circle
- 树
  &#xe62e;
  layui-icon-tree
- 表格
  &#xe62d;
  layui-icon-table
- 图表
  &#xe62c;
  layui-icon-chart
- 图标 报表 屏幕
  &#xe629;
  layui-icon-chart-screen
- 引擎
  &#xe628;
  layui-icon-engine
- 下三角
  &#xe625;
  layui-icon-triangle-d
- 右三角
  &#xe623;
  layui-icon-triangle-r
- 文件
  &#xe621;
  layui-icon-file
- 设置-小型
  &#xe620;
  layui-icon-set-sm
- 减少-圆圈
  &#xe616;
  layui-icon-reduce-circle
- 添加-圆圈
  &#xe61f;
  layui-icon-add-circle
- 404
  &#xe61c;
  layui-icon-404
- 关于
  &#xe60b;
  layui-icon-about
- 箭头 向上
  &#xe619;
  layui-icon-up
- 箭头 向下
  &#xe61a;
  layui-icon-down
- 箭头 向左
  &#xe603;
  layui-icon-left
- 箭头 向右
  &#xe602;
  layui-icon-right
- 圆点
  &#xe617;
  layui-icon-circle-dot
- 搜索
  &#xe615;
  layui-icon-search
- 设置-实心
  &#xe614;
  layui-icon-set-fill
- 群组
  &#xe613;
  layui-icon-group
- 好友
  &#xe612;
  layui-icon-friends
- 回复 评论 实心
  &#xe611;
  layui-icon-reply-fill
- 菜单 隐身 实心
  &#xe60f;
  layui-icon-menu-fill
- 记录
  &#xe60e;
  layui-icon-log
- 图片-细体
  &#xe60d;
  layui-icon-picture-fine
- 表情-笑-细体
  &#xe60c;
  layui-icon-face-smile-fine
- 列表
  &#xe60a;
  layui-icon-list
- 发布 纸飞机
  &#xe609;
  layui-icon-release
- 对 OK
  &#xe605;
  layui-icon-ok
- 帮助
  &#xe607;
  layui-icon-help
- 客服
  &#xe606;
  layui-icon-chat
- top 置顶
  &#xe604;
  layui-icon-top
- 收藏-空心
  &#xe600;
  layui-icon-star
- 收藏-实心
  &#xe658;
  layui-icon-star-fill
- 关闭-实心
  &#x1007;
  layui-icon-close-fill
- 关闭-空心
  &#x1006;
  layui-icon-close
- 正确
  &#x1005;
  layui-icon-ok-circle
- 添加-圆圈-细体
  &#xe608;
  layui-icon-add-circle-fine

跨域问题的解决

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

layui - 在每一个细节中，用心与你沟通