Layui添加集成第三方Unicode图标

Layui不可否认，轻量，好用，但是在Unicode字体库方面就显得有些力不从心了，因为默认它只集成了168个图标，显然是不够用的，于是探索了一番，有了本文，在laui的基础上扩展集成一些第三方的字体到laui中，这样就可以不额外加载文件的情况下使用第三方的Unicode图标。

我们一般是直接使用阿里云的字体库，因为它的字体库非常全面,但是我们又不能全部都下载下来加载，如果这样的话字体文件会非常的大，所以我们要选择性的去下载。

这里我先说一下整体思路，方便理解和操作。

下载字体库---》修改css文件---》合并css文件

1，我们先从阿里字体库挑选好自己需要的字体，加入购物，当然你也可以加收藏，然后直接选择下载代码，下载下来后会有很大的字体文件，不用理会。

2，解压下载好的字体库，找到里面的iconfont.css文件，打开它。然后把里面的所有 iconfont 替换成 layui-icon。替换好后把css文件的第一个属性直接复制出来放到Layui/css/layui.css文件末尾。

替换好后类似下面的:

@font-face {font-family: "layui-icon";
  src: url('layui-icon.eot?t=1608186774436'); /* IE9 */
  src: url('layui-icon.eot?t=1608186774436#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAj4AAsAAAAAEDAAAAiqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==') format('woff2'),
  url('layui-icon.woff?t=1608186774436') format('woff'),
  url('layui-icon.ttf?t=1608186774436') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('layui-icon.svg?t=1608186774436#layui-icon') format('svg'); /* iOS 4.1- */
}

合并完成后，就可以直接使用了，注意这里只能使用Unicode方式，不能使用class，因为我们没有引入class，否则样式文件会很臃肿。

使用方式案例:

<i class="layui-icon">&#xe62f;</i>

就可以了，对了这里需要提醒一下最好替换前先备份一下css文件，因为我们还要查看图标对应的Unicode字符，对应字符在demo_index.html中直接打开就能看到了。

好了先到这里百忙之中抽空记录一下。