layui 已定义的 颜色 和 图标

这个比较好处理就是一个:class先引入CSS
<link rel="stylesheet" href="/layui/css/layui.css">
然后就可以直接用了。

1.jpg

 
象要红色就是:
<div class="layui-bg-red">
背景为红色的DIV
</div>

图标:
<i class="layui-icon layui-icon-face-smile"></i>  
或者:
<i class="layui-icon">&#xe60c;</i>  
都可以实现图标。
内置图标(140个)
 
下面是应用列表
----------------------
半星
&#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
 
添加-圆圈
&#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
 

0 个评论

要回复文章请先登录注册