第五步，选择集成方式。
Iconfont提供了两种集成方式，一种是通过生成在线的CDN资源进行集成，好处就是维护起来非常方便。一个项目会有一个唯一的地址且不变，仓库更新后也能直接引用而忽略更新的问题。另一种方式则是下载到本地集成，好处是便于保证整个项目的完整度和保留各类版本。
仁者见仁，智者见智，我选择了下载文件的方式进行集成。
在点击下载到本地按钮后，我们得到了一个ZIP包。从layui官网下载框架最新版本，两者解压后放在同一个目录，目录结构如下。
第六步，在layui目录下的 css/modules 下新建一个名为layui-icon-extend的目录，将字体目录中的以 iconfont开头的文件拷贝进去。
第七步，开始写代码了！！！
在页面引用中引用 layui-icon-extend 下的 iconfont.css文件，然后就可以使用「 iconfont layui-extend-xxxx 」的方式引用图标了。
在上面的样式中，iconfont指的是 iconfont.css 中的样式名。为避免冲突，一般不推荐修改。当然，如果你引用了较多iconfont上的项目，也是可以修改的。
注意：千万不要修改为layui-icon，会和 layui自带的图标冲突！！
第八步，让我们一起来看下效果吧。
更多layui知识请关注layui使用教程栏目。
以上就是layui自定义字体图标图文教程的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《layui》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
