Layui 字体图标
2023-03-07 09:47:18 时间
layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont.cn)。因此你可以把一个 icon 看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size,就可以改变图标的颜色和大小。
1. Layui官方CDN (测试功能使用CDN就行,不用在下载layui到本地,这样就麻烦了)
字体图标显示,引入css就足够了,无需引入 layui.js,使用到模块时才必须引入js文件
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
2. 使用方式
推荐对 i
标签设定 class="layui-icon"
来定义图标
然后对 i
标签加上图标对应的 字体类名
或 unicode 字符
,即可显示出字体图标
字体图标容器
<i class="layui-icon"></i>
字体图标没在容器中时则会被解析成HTML预留的字符实体,而不是layui的字体图标,所以浏览器上将显示为一个方框
<i class="layui-icon-fire"></i>

正确使用:放入字体图标容器标签
<i class="layui-icon layui-icon-fire"></i>
<i class="layui-icon"></i>
3. 因为是字体图标(图标本质是字体),所以可以通过css修改图标样式
<i class="layui-icon layui-icon-fire" style="color:red;font-size:25px;"></i>
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的