HTML8提高展示丰富多彩图标按钮，不同色彩的图标按钮，翻页、设置、首页、删除、分享、收藏等代表功能的图标类按钮。图标非img图片，而是可改变大小的Unicode字符文字字体集的图标，可改变图标按钮大小颜色等CSS样式。
功能表达的图标按钮，可通过div CSS改变按钮样式
最大特点为图标为对应Unicode字符即可插入显示对应图标，而不是img标签引入图片，这样好处可以改变图标大小。
更多图标字符地址：html8.com.cn/css/1404.shtml
一、图标按钮在线效果
<button class="layui-btn"><i class="layui-icon"></i></button> <button class="layui-btn"><i class="layui-icon"></i></button> <button class="layui-btn"><i class="layui-icon"></i></button> <button class="layui-btn"><i class="layui-icon"></i></button> <button class="layui-btn"><i class="layui-icon"></i></button> <button class="layui-btn"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon"></i></button> <button class="layui-btn"><i class="layui-icon"></i> 添加</button> <button class="layui-btn"><i class="layui-icon"></i> 删除</button>
同时查看本网页的源代码，可以看见以上在线演示的图标按钮没有使用img图片，图标采用是文字字符，通过css class设置图标颜色、大小。即设置字体大小和字体颜色、背景颜色实现图标按钮大小、按钮背景颜色、按钮的图标颜色大小。
图标类按钮样式布局解释说明：
按钮布局：class=layui-btn，可以使用button,div,li都可以
图标字符： 更多图标字符地址html8.com.cn/css/1404.shtml
图标样式：<i class="layui-icon"></i>
图标大小与颜色：对i标签用style属性设置color和font-size来实现。
二、按钮的图标获取与颜色改变
图标按钮可以使用div标签、li标签、input表单元素等实现，这里使用button实现，不影响效果与其它标签使用，换成DIV一样效果，所以可以应用与非表单控件
<div class="layui-btn"><i class="layui-icon"></i> 分享</div> <div class="layui-btn layui-bg-red"><i class="layui-icon"></i> 分享</div> <div class="layui-btn layui-bg-blue"><i class="layui-icon"></i> 分享</div> <div class="layui-btn layui-bg-blue"><i class="layui-icon" style="font-size:26px"></i> 变大</div> <div class="layui-btn layui-bg-blue"><i class="layui-icon" style="color:#000"></i> 图标颜色</div>
从效果与按钮对应代码对比着看，图标非img图片，图标大小和颜色是可以通过对i标签设置style属性设置字体大小和字体颜色来改变图标图片大小和颜色
三、成功使用条件
漂亮的各种各样上百种图标按钮，是建立在layui框架上的，这里CSS图标按钮需要引入layui的框架CSS文件即可。下载框架，放置项目中、HTML引入一条CSS文件，即可轻松实现图标按钮使用。div css框架化的具体使用方法如下。
使用说明：项目使用步骤：
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。