我们一般是直接使用阿里云的字体库,因为它的字体库非常全面,但是我们又不能全部都下载下来加载,如果这样的话字体文件会非常的大,所以我们要选择性的去下载。
这里我先说一下整体思路,方便理解和操作。
下载字体库---》修改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"></i>就可以了,对了这里需要提醒一下最好替换前先备份一下css文件,因为我们还要查看图标对应的Unicode字符,对应字符在demo_index.html中直接打开就能看到了。
好了先到这里百忙之中抽空记录一下。
除特别注明外,本站所有文章均为博文家原创,转载请注明出处来自https://www.32e.top/develop/front/article-159.html
暂无评论