本文摘自PHP中文网,作者藏色散人,侵删。
layui添加icon的方法:首先打开iconfont官网并选择中意的字体图标库;然后在项目中点击“下载至本地”,并将解压的文件复制到本地的项目中;最后在本地项目引入相关html代码即可。
推荐:《layUI教程》
layui2.0及以前版本的字体图标不能满足项目的需求,其图标来源于阿里巴巴www.iconfont.cn,所以自己手动丰富了项目字体图标库,记录如下。
1、添加字体图标至购物车
打开www.iconfont.cn,选择中意的字体图标库,添加至"库"(即字体购物车图标),如下图所示
2、将图标添加至项目
点击右侧“购物车图标”,然后将选中的字体图标添加至项目。建议新建项目,方便以后扩展。
3、下载并引入代码
在项目中,点击"下载至本地",然后将解压的文件复制到本地的项目中,并在本地引入 iconfont.css 文件即可。
4、选择字体图标
在浏览器中打开,demo_unicode.html文件,按照文件提示,在本地项目引入相关html代码即可。
如 <i class="iconfont">3</i>
若是layui,为样式美观,可修改iconfont.css的修改css代码如下
1 2 3 4 5 6 7 8 |
|
5、以后若需要再添加字体图标,重复上述步骤,直接在阿里巴巴iconfont下载项目代码至本地,覆盖以往的代码(iconfont.css 除外),即可使用新的字体图标。
以上就是layui怎么添加icon的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《layui》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者