311天前2020-12-17 14:43:03 |    抢沙发  620 
Layui不可否认,轻量,好用,但是在Unicode字体库方面就显得有些力不从心了,因为默认它只集成了168个图标,显然是不够用的,于是探索了一番,有了本文,在laui的基础上扩展集成一些第三方的字体到laui中,这样就可以不额外加载文件的情况下使用第三方的Unicode图标。

Layui

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

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

下载字体库---》修改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中直接打开就能看到了。

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

发表评论

暂无评论

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享