图标按钮_丰富多彩图标类按钮插件控件框架-会学html CSS

图标按钮_丰富多彩图标类按钮插件控件框架

css5提高展示丰富多彩图标按钮,不同色彩的图标按钮,翻页、设置、首页、删除、分享、收藏等代表功能的图标类按钮。图标非img图片,而是可改变大小的Unicode字符文字字体集的图

HTML8提高展示丰富多彩图标按钮,不同色彩的图标按钮,翻页、设置、首页、删除、分享、收藏等代表功能的图标类按钮。图标非img图片,而是可改变大小的Unicode字符文字字体集的图标,可改变图标按钮大小颜色等CSS样式。

功能表达的图标按钮
功能表达的图标按钮,可通过div CSS改变按钮样式

最大特点为图标为对应Unicode字符即可插入显示对应图标,而不是img标签引入图片,这样好处可以改变图标大小。

更多图标字符地址:html8.com.cn/css/1404.shtml

一、图标按钮在线效果

图标按钮在线效果









图标按钮对应HTML代码
<button class="layui-btn"><i class="layui-icon">&#xe600;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe602;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe641;</i></button>


<button class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe600;</i></button>
<button class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe602;</i></button>
<button class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe641;</i></button>


<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe600;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe602;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-primary layui-btn-small"><i class="layui-icon">&#xe641;</i></button>


<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe600;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe602;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-small"><i class="layui-icon">&#xe641;</i></button>


<button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe600;</i></button>
<button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe603;</i></button>
<button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe602;</i></button>
<button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe642;</i></button>
<button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe640;</i></button>
<button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe641;</i></button>
<button class="layui-btn"><i class="layui-icon">&#xe608;</i> 添加</button>
<button class="layui-btn"><i class="layui-icon">&#xe640;</i> 删除</button>

同时查看本网页的源代码,可以看见以上在线演示的图标按钮没有使用img图片,图标采用是文字字符,通过css class设置图标颜色、大小。即设置字体大小字体颜色、背景颜色实现图标按钮大小、按钮背景颜色、按钮的图标颜色大小。

图标类按钮样式布局解释说明:
按钮布局:class=layui-btn,可以使用button,div,li都可以
图标字符:&#xe600; 更多图标字符地址html8.com.cn/css/1404.shtml
图标样式:<i class="layui-icon">&#xe600;</i>
图标大小与颜色:对i标签用style属性设置colorfont-size来实现。

二、按钮的图标获取与颜色改变

图标按钮可以使用div标签、li标签、input表单元素等实现,这里使用button实现,不影响效果与其它标签使用,换成DIV一样效果,所以可以应用与非表单控件

用div实现图标按钮大小颜色

分享
分享
分享
变大
图标颜色

对应html代码
<div class="layui-btn"><i class="layui-icon">&#xe600;</i> 分享</div>
<div class="layui-btn layui-bg-red"><i class="layui-icon">&#xe600;</i> 分享</div> 
<div class="layui-btn layui-bg-blue"><i class="layui-icon">&#xe600;</i> 分享</div> 
<div class="layui-btn layui-bg-blue"><i class="layui-icon" style="font-size:26px">&#xe600;</i> 变大</div> 
<div class="layui-btn layui-bg-blue"><i class="layui-icon" style="color:#000">&#xe600;</i> 图标颜色</div>

从效果与按钮对应代码对比着看,图标非img图片,图标大小和颜色是可以通过对i标签设置style属性设置字体大小和字体颜色来改变图标图片大小和颜色

三、成功使用条件

漂亮的各种各样上百种图标按钮,是建立在layui框架上的,这里CSS图标按钮需要引入layui的框架CSS文件即可。下载框架,放置项目中、HTML引入一条CSS文件,即可轻松实现图标按钮使用。div css框架化的具体使用方法如下。

使用说明:

项目使用步骤:
1、下载layui压缩包;
2、解压后,将文件夹内”layui“文件夹整体拷贝入当前项目;
3、html引入layui.css(注意路径正确);
4、拷贝需要效果HTML代码(和JS)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui v2.X(实时更新

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 不需要 此网页布局不用html引入JS库
图标素材 图标采用文字字符 图标字符资源地址
layui教程 layui使用教程 layui教程地址
更新