扩展 layui icon 图标库 为 阿里图标库或Font Awesome

鉴于Layui 140个图标可能不太够用，所以这里我们需要扩展下
分别试了 Font Awesome 和 阿里的IconFont ，其他图标库应该是通用的

首先Font Awesome 这里用的4.7，5.0+emmm是要买授权了嘛。。。不知道，阿里库就挺好的挺丰富反正
需要先引入font-face（扩展其他库也要这样）

@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
    url('/assets/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
    url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
    url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

接着覆写layui-icon这个类

.layui-icon {
    font-family: layui-icon, FontAwesome!important;
}

然后起名字，layui-icon-fa这样用于区分layui的icon，后缀用font awesome的名字，因为使用fontclass的形式，所以后面的Unicode是我们需要的

.layui-icon-fa-bandcamp:before{
    content: '\f2d5';
}

使用的时候和layui icon的使用方法一致

<i class="layui-icon layui-icon-fa-bandcamp" style="font-size: 30px; color: red;"></i> Font Awesome

关于阿里的图标库使用就更简单了，完全不需要上述这么繁琐

1. 首先注册用户登录；
2. 图标管理里创建项目；创建项目的时候，可以这样设置，这样子前缀就和layui统一了，至于下面的Font Family改不改都行，如果更改那覆写样式的时候要改成与之对应的

3. 添加喜欢的图标到项目里；

4. 生成在线链接；选中fontclass；复制下方的代码，在页面内引入
   

5. 覆写layui-icon这个类

.layui-icon {
    font-family: layui-icon, iconfont !important;
}

6. 使用啦，在4步骤的那个页面种，Font Class下有对应图标的class名直接复制使用即可

<i class="layui-icon layui-icon-ali-add" style="font-size: 30px; color: black;"></i> Ali IconFont

最后效果图：
分别是Font Awesome、Layui Icon、阿里库（同Font Awesome方式引入）、阿里库（上述描述方式）

https://fly.layui.com/jie/42581/ layui社区帖子地址