layui图标使用和自定义矢量库图标

layui图标：

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。

使用方法：

通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标。内置图标的class查阅图标文档

从 layui 2.3.0 开始，支持 font-class 的形式定义图标：
<i class="layui-icon layui-icon-face-smile"></i>  
						
注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标
<i class="layui-icon"></i>   
其中的  即是图标对应的 unicode 字符
						
你可以去定义它的颜色或者大小，如：  
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

自定义阿里巴巴矢量图标库：

2. 在layui项目中创建一个文件夹，放入上面的几个文件，然后再引入iconfont.css文件即可使用：

<link rel="stylesheet" href="./plugins/layui/myicon/iconfont.css" type="text/css">

下载的iconfont.css文件如下

.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.icon-group:before { content: "e6ff"; }

.icon-group_fill:before { content: "e700"; }

iconfont.css文件如上（下载了两个图标），类名iconfont可以修改。将所有的iconfont字样替换成layui-icon。

3. html 引用：

<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">
    <i class="layui-icon layui-icon-form"></i>查看<i class="iconfont icon-group"></i>
</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">
    <i class="layui-icon layui-icon-edit"></i>编辑<i class="iconfont"></i>
</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
    <i class="layui-icon layui-icon-delete"></i>删除<i class="iconfont icon-empty"></i>
 </a>iconfont icon-group"></i>
</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">
    <i class="layui-icon layui-icon-edit"></i>编辑<i class="iconfont"></i>
</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
    <i class="layui-icon layui-icon-delete"></i>删除<i class="iconfont icon-empty"></i>
 </a>

效果如上：

bootstrap使用阿里自定义图标库同理：