LayUI Icon 扩展 Iconfont 图标

layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont)。不过 layui 自带的图标太少了,可以说连够用都算不上,所以今天就要用 iconfont 上的图标扩展一下。

引入图标

正常引入 layui 和 iconfont 的 css。

1
2
<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/iconfont/iconfont.css" media="all" />

加入样式

加入样式,优先采用 layui 自带图标。

1
2
3
4
5
6
7
8
9
<style>
.layui-icon {
font-family: layui-icon, iconfont !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
如果对您有帮助,不妨请我喝杯奶茶哟~( ̄︶ ̄)↗
Dirge 微信

微信

Dirge 支付宝

支付宝