1. layui的所有图标全部采用字体形式, 取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个icon看作是一个普通的文字, 这意味着你直接用css控制文字属性, 如color、font-size, 就可以改变图标的颜色和大小。你可以通过font-class或unicode来定义不同的图标。
2. 通过对一个内联元素(一般推荐用i标签)设定class="layui-icon", 来定义一个图标, 然后对元素加上图标对应的font-class(注意: layui 2.3.0之前只支持采用unicode字符), 即可显示出你想要的图标, 譬如:
<i class="layui-icon layui-icon-heart-fill"></i>
<i class="layui-icon"></i>3. 内置图标168个一览表
4. 例子
4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>字体图标</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<i class="layui-icon layui-icon-heart-fill">实心</i><i class="layui-icon">实心</i>
<i class="layui-icon layui-icon-heart">空心</i><i class="layui-icon">空心</i>
<i class="layui-icon layui-icon-light">亮度/晴</i><i class="layui-icon">亮度/晴</i>
<i class="layui-icon layui-icon-time">时间/历史</i><i class="layui-icon">时间/历史</i>
<i class="layui-icon layui-icon-bluetooth">蓝牙</i><i class="layui-icon">蓝牙</i>
<i class="layui-icon layui-icon-at">艾特</i><i class="layui-icon">艾特</i>
<i class="layui-icon layui-icon-mute">静音</i><i class="layui-icon">静音</i><br /><br />
<i class="layui-icon layui-icon-mike">录音/麦克风</i><i class="layui-icon">录音/麦克风</i>
<i class="layui-icon layui-icon-key">密钥/钥匙</i><i class="layui-icon">密钥/钥匙</i>
<i class="layui-icon layui-icon-gift">礼物/活动</i><i class="layui-icon">礼物/活动</i>
<i class="layui-icon layui-icon-email">邮箱</i><i class="layui-icon">邮箱</i>
<i class="layui-icon layui-icon-rss">RSS</i><i class="layui-icon">RSS</i>
<i class="layui-icon layui-icon-wifi">WiFi</i><i class="layui-icon">WiFi</i>
<i class="layui-icon layui-icon-logout">退出/注销</i><i class="layui-icon">退出/注销</i><br /><br />
<i class="layui-icon layui-icon-android">Android 安卓</i><i class="layui-icon">Android 安卓</i>
<i class="layui-icon layui-icon-ios">Apple IOS 苹果</i><i class="layui-icon">Apple IOS 苹果</i>
<i class="layui-icon layui-icon-windows">Windows</i><i class="layui-icon">Windows</i>
<i class="layui-icon layui-icon-transfer">穿梭框</i><i class="layui-icon">穿梭框</i>
<i class="layui-icon layui-icon-service">客服</i><i class="layui-icon">客服</i>
<i class="layui-icon layui-icon-subtraction">减</i><i class="layui-icon">减</i>
<i class="layui-icon layui-icon-addition">加</i><i class="layui-icon">加</i><br /><br />
<i class="layui-icon layui-icon-slider">滑块</i><i class="layui-icon">滑块</i>
<i class="layui-icon layui-icon-print">打印</i><i class="layui-icon">打印</i>
<i class="layui-icon layui-icon-export">导出</i><i class="layui-icon">导出</i>
<i class="layui-icon layui-icon-cols">列</i><i class="layui-icon">列</i>
<i class="layui-icon layui-icon-screen-restore">退出全屏</i><i class="layui-icon">退出全屏</i>
<i class="layui-icon layui-icon-screen-full">全屏</i><i class="layui-icon">全屏</i>
<i class="layui-icon layui-icon-rate-half">半星</i><i class="layui-icon">半星</i><br /><br />
<i class="layui-icon layui-icon-rate">星星-空心</i><i class="layui-icon">星星-空心</i>
<i class="layui-icon layui-icon-rate-solid">星星-实心</i><i class="layui-icon">星星-实心</i>
<i class="layui-icon layui-icon-cellphone">手机</i><i class="layui-icon">手机</i>
<i class="layui-icon layui-icon-vercode">验证码</i><i class="layui-icon">验证码</i>
<i class="layui-icon layui-icon-login-wechat">微信</i><i class="layui-icon">微信</i>
<i class="layui-icon layui-icon-login-qq">QQ</i><i class="layui-icon">QQ</i>
<i class="layui-icon layui-icon-login-weibo">微博</i><i class="layui-icon">微博</i><br /><br />
<i class="layui-icon layui-icon-password">密码</i><i class="layui-icon">密码</i>
<i class="layui-icon layui-icon-username">用户名</i><i class="layui-icon">用户名</i>
<i class="layui-icon layui-icon-refresh-3">刷新-粗</i><i class="layui-icon">刷新-粗</i>
<i class="layui-icon layui-icon-auz">授权</i><i class="layui-icon">授权</i>
<i class="layui-icon layui-icon-spread-left">左向右伸缩菜单</i><i class="layui-icon">左向右伸缩菜单</i>
<i class="layui-icon layui-icon-shrink-right">右向左伸缩菜单</i><i class="layui-icon">右向左伸缩菜单</i>
<i class="layui-icon layui-icon-snowflake">雪花</i><i class="layui-icon">雪花</i><br /><br />
<i class="layui-icon layui-icon-tips">提示说明</i><i class="layui-icon">提示说明</i>
<i class="layui-icon layui-icon-note">便签</i><i class="layui-icon">便签</i>
<i class="layui-icon layui-icon-home">主页</i><i class="layui-icon">主页</i>
<i class="layui-icon layui-icon-senior">高级</i><i class="layui-icon">高级</i>
<i class="layui-icon layui-icon-refresh">刷新</i><i class="layui-icon">刷新</i>
<i class="layui-icon layui-icon-refresh-1">刷新</i><i class="layui-icon">刷新</i>
<i class="layui-icon layui-icon-flag">旗帜</i><i class="layui-icon">旗帜</i><br /><br />
<i class="layui-icon layui-icon-theme">主题</i><i class="layui-icon">主题</i>
<i class="layui-icon layui-icon-notice">消息-通知</i><i class="layui-icon">消息-通知</i>
<i class="layui-icon layui-icon-website">网站</i><i class="layui-icon">网站</i>
<i class="layui-icon layui-icon-console">控制台</i><i class="layui-icon">控制台</i>
<i class="layui-icon layui-icon-face-surprised">表情-惊讶</i><i class="layui-icon">表情-惊讶</i>
<i class="layui-icon layui-icon-set">设置-空心</i><i class="layui-icon">设置-空心</i>
<i class="layui-icon layui-icon-template-1">模板</i><i class="layui-icon">模板</i><br /><br />
<i class="layui-icon layui-icon-app">应用</i><i class="layui-icon">应用</i>
<i class="layui-icon layui-icon-template">模板</i><i class="layui-icon">模板</i>
<i class="layui-icon layui-icon-praise">赞</i><i class="layui-icon">赞</i>
<i class="layui-icon layui-icon-tread">踩</i><i class="layui-icon">踩</i>
<i class="layui-icon layui-icon-male">男</i><i class="layui-icon">男</i>
<i class="layui-icon layui-icon-female">女</i><i class="layui-icon">女</i>
<i class="layui-icon layui-icon-camera">相机-空心</i><i class="layui-icon">相机-空心</i><br /><br />
<i class="layui-icon layui-icon-camera-fill">相机-实心</i><i class="layui-icon">相机-实心</i>
<i class="layui-icon layui-icon-more">菜单-水平</i><i class="layui-icon">菜单-水平</i>
<i class="layui-icon layui-icon-more-vertical">菜单-垂直</i><i class="layui-icon">菜单-垂直</i>
<i class="layui-icon layui-icon-rmb">金额-人民币</i><i class="layui-icon">金额-人民币</i>
<i class="layui-icon layui-icon-dollar">金额-美元</i><i class="layui-icon">金额-美元</i>
<i class="layui-icon layui-icon-diamond">钻石-等级</i><i class="layui-icon">钻石-等级</i>
<i class="layui-icon layui-icon-fire">火</i><i class="layui-icon">火</i><br /><br />
<i class="layui-icon layui-icon-return">返回</i><i class="layui-icon">返回</i>
<i class="layui-icon layui-icon-location">位置-地图</i><i class="layui-icon">位置-地图</i>
<i class="layui-icon layui-icon-read">办公-阅读</i><i class="layui-icon">办公-阅读</i>
<i class="layui-icon layui-icon-survey">调查</i><i class="layui-icon">调查</i>
<i class="layui-icon layui-icon-face-smile">表情-微笑</i><i class="layui-icon">表情-微笑</i>
<i class="layui-icon layui-icon-face-cry">表情-哭泣</i><i class="layui-icon">表情-哭泣</i>
<i class="layui-icon layui-icon-cart-simple">购物车</i><i class="layui-icon">购物车</i><br /><br />
<i class="layui-icon layui-icon-cart">购物车</i><i class="layui-icon">购物车</i>
<i class="layui-icon layui-icon-next">下一页</i><i class="layui-icon">下一页</i>
<i class="layui-icon layui-icon-prev">上一页</i><i class="layui-icon">上一页</i>
<i class="layui-icon layui-icon-upload-drag">上传-空心-拖拽</i><i class="layui-icon">上传-空心-拖拽</i>
<i class="layui-icon layui-icon-upload">上传-实心</i><i class="layui-icon">上传-实心</i>
<i class="layui-icon layui-icon-download-circle">下载-圆圈</i><i class="layui-icon">下载-圆圈</i>
<i class="layui-icon layui-icon-component">组件</i><i class="layui-icon">组件</i><br /><br />
<i class="layui-icon layui-icon-file-b">文件-粗</i><i class="layui-icon">文件-粗</i>
<i class="layui-icon layui-icon-user">用户</i><i class="layui-icon">用户</i>
<i class="layui-icon layui-icon-find-fill">发现-实心</i><i class="layui-icon">发现-实心</i>
<i class="layui-icon layui-icon-loading">loading</i><i class="layui-icon">loading</i>
<i class="layui-icon layui-icon-loading-1">loading</i><i class="layui-icon">loading</i>
<i class="layui-icon layui-icon-add-1">添加</i><i class="layui-icon">添加</i>
<i class="layui-icon layui-icon-play">播放</i><i class="layui-icon">播放</i><br /><br />
<i class="layui-icon layui-icon-pause">暂停</i><i class="layui-icon">暂停</i>
<i class="layui-icon layui-icon-headset">音频-耳机</i><i class="layui-icon">音频-耳机</i>
<i class="layui-icon layui-icon-video">视频</i><i class="layui-icon">视频</i>
<i class="layui-icon layui-icon-voice">语音-声音</i><i class="layui-icon">语音-声音</i>
<i class="layui-icon layui-icon-speaker">消息-通知-喇叭</i><i class="layui-icon">消息-通知-喇叭</i>
<i class="layui-icon layui-icon-fonts-del">删除线</i><i class="layui-icon">删除线</i>
<i class="layui-icon layui-icon-fonts-code">代码</i><i class="layui-icon">代码</i><br /><br />
<i class="layui-icon layui-icon-fonts-html">HTML</i><i class="layui-icon">HTML</i>
<i class="layui-icon layui-icon-fonts-strong">字体加粗</i><i class="layui-icon">字体加粗</i>
<i class="layui-icon layui-icon-unlink">删除链接</i><i class="layui-icon">删除链接</i>
<i class="layui-icon layui-icon-picture">图片</i><i class="layui-icon">图片</i>
<i class="layui-icon layui-icon-link">链接</i><i class="layui-icon">链接</i>
<i class="layui-icon layui-icon-face-smile-b">表情-笑-粗</i><i class="layui-icon">表情-笑-粗</i>
<i class="layui-icon layui-icon-align-left">左对齐</i><i class="layui-icon">左对齐</i><br /><br />
<i class="layui-icon layui-icon-align-right">右对齐</i><i class="layui-icon">右对齐</i>
<i class="layui-icon layui-icon-align-center">居中对齐</i><i class="layui-icon">居中对齐</i>
<i class="layui-icon layui-icon-fonts-u">字体-下划线</i><i class="layui-icon">字体-下划线</i>
<i class="layui-icon layui-icon-fonts-i">字体-斜体</i><i class="layui-icon">字体-斜体</i>
<i class="layui-icon layui-icon-tabs">Tabs 选项卡</i><i class="layui-icon">Tabs 选项卡</i>
<i class="layui-icon layui-icon-radio">单选框-选中</i><i class="layui-icon">单选框-选中</i>
<i class="layui-icon layui-icon-circle">单选框-候选</i><i class="layui-icon">单选框-候选</i><br /><br />
<i class="layui-icon layui-icon-edit">编辑</i><i class="layui-icon">编辑</i>
<i class="layui-icon layui-icon-share">分享</i><i class="layui-icon">分享</i>
<i class="layui-icon layui-icon-delete">删除</i><i class="layui-icon">删除</i>
<i class="layui-icon layui-icon-form">表单</i><i class="layui-icon">表单</i>
<i class="layui-icon layui-icon-cellphone-fine">手机-细体</i><i class="layui-icon">手机-细体</i>
<i class="layui-icon layui-icon-dialogue">聊天 对话 沟通</i><i class="layui-icon">聊天 对话 沟通</i>
<i class="layui-icon layui-icon-fonts-clear">文字格式化</i><i class="layui-icon">文字格式化</i><br /><br />
<i class="layui-icon layui-icon-layer">窗口</i><i class="layui-icon">窗口</i>
<i class="layui-icon layui-icon-date">日期</i><i class="layui-icon">日期</i>
<i class="layui-icon layui-icon-water">水 下雨</i><i class="layui-icon">水 下雨</i>
<i class="layui-icon layui-icon-code-circle">代码-圆圈</i><i class="layui-icon">代码-圆圈</i>
<i class="layui-icon layui-icon-carousel">轮播组图</i><i class="layui-icon">轮播组图</i>
<i class="layui-icon layui-icon-prev-circle">翻页</i><i class="layui-icon">翻页</i>
<i class="layui-icon layui-icon-layouts">布局</i><i class="layui-icon">布局</i><br /><br />
<i class="layui-icon layui-icon-util">工具</i><i class="layui-icon">工具</i>
<i class="layui-icon layui-icon-templeate-1">选择模板</i><i class="layui-icon">选择模板</i>
<i class="layui-icon layui-icon-upload-circle">上传-圆圈</i><i class="layui-icon">上传-圆圈</i>
<i class="layui-icon layui-icon-tree">树</i><i class="layui-icon">树</i>
<i class="layui-icon layui-icon-table">表格</i><i class="layui-icon">表格</i>
<i class="layui-icon layui-icon-chart">图表</i><i class="layui-icon">图表</i>
<i class="layui-icon layui-icon-chart-screen">图标 报表 屏幕</i><i class="layui-icon">图标 报表 屏幕</i><br /><br />
<i class="layui-icon layui-icon-engine">引擎</i><i class="layui-icon">引擎</i>
<i class="layui-icon layui-icon-triangle-d">下三角</i><i class="layui-icon">下三角</i>
<i class="layui-icon layui-icon-triangle-r">右三角</i><i class="layui-icon">右三角</i>
<i class="layui-icon layui-icon-file">文件</i><i class="layui-icon">文件</i>
<i class="layui-icon layui-icon-set-sm">设置-小型</i><i class="layui-icon">设置-小型</i>
<i class="layui-icon layui-icon-reduce-circle">减少-圆圈</i><i class="layui-icon">减少-圆圈</i>
<i class="layui-icon layui-icon-add-circle">添加-圆圈</i><i class="layui-icon">添加-圆圈</i><br /><br />
<i class="layui-icon layui-icon-404">404</i><i class="layui-icon">404</i>
<i class="layui-icon layui-icon-about">关于</i><i class="layui-icon">关于</i>
<i class="layui-icon layui-icon-up">箭头 向上</i><i class="layui-icon">箭头 向上</i>
<i class="layui-icon layui-icon-down">箭头 向下</i><i class="layui-icon">箭头 向下</i>
<i class="layui-icon layui-icon-left">箭头 向左</i><i class="layui-icon">箭头 向左</i>
<i class="layui-icon layui-icon-right">箭头 向右</i><i class="layui-icon">箭头 向右</i>
<i class="layui-icon layui-icon-circle-dot">圆点</i><i class="layui-icon">圆点</i><br /><br />
<i class="layui-icon layui-icon-search">搜索</i><i class="layui-icon">搜索</i>
<i class="layui-icon layui-icon-set-fill">设置-实心</i><i class="layui-icon">设置-实心</i>
<i class="layui-icon layui-icon-group">群组</i><i class="layui-icon">群组</i>
<i class="layui-icon layui-icon-friends">好友</i><i class="layui-icon">好友</i>
<i class="layui-icon layui-icon-reply-fill">回复 评论 实心</i><i class="layui-icon">回复 评论 实心</i>
<i class="layui-icon layui-icon-menu-fill">菜单 隐身 实心</i><i class="layui-icon">菜单 隐身 实心</i>
<i class="layui-icon layui-icon-log">记录</i><i class="layui-icon">记录</i><br /><br />
<i class="layui-icon layui-icon-picture-fine">图片-细体</i><i class="layui-icon">图片-细体</i>
<i class="layui-icon layui-icon-face-smile-fine">表情-笑-细体</i><i class="layui-icon">表情-笑-细体</i>
<i class="layui-icon layui-icon-list">列表</i><i class="layui-icon">列表</i>
<i class="layui-icon layui-icon-release">发布 纸飞机</i><i class="layui-icon">发布 纸飞机</i>
<i class="layui-icon layui-icon-ok">对 OK</i><i class="layui-icon">对 OK</i>
<i class="layui-icon layui-icon-help">帮助</i><i class="layui-icon">帮助</i>
<i class="layui-icon layui-icon-chat">客服</i><i class="layui-icon">客服</i><br /><br />
<i class="layui-icon layui-icon-top">top 置顶</i><i class="layui-icon">top 置顶</i>
<i class="layui-icon layui-icon-star">收藏-空心</i><i class="layui-icon">收藏-空心</i>
<i class="layui-icon layui-icon-star-fill">收藏-实心</i><i class="layui-icon">收藏-实心</i>
<i class="layui-icon layui-icon-close-fill">关闭-实心</i><i class="layui-icon">ဇ关闭-实心</i>
<i class="layui-icon layui-icon-close">关闭-空心</i><i class="layui-icon">ဆ关闭-空心</i>
<i class="layui-icon layui-icon-ok-circle">正确</i><i class="layui-icon">စ正确</i>
<i class="layui-icon layui-icon-add-circle-fine">添加-圆圈-细体</i><i class="layui-icon">添加-圆圈-细体</i>
</body>
</html>4.2. 效果图
