003-字体图标
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. 效果圖
總結
- 上一篇： 002-layui颜色
- 下一篇： 004-CSS3动画类