LayUI Icon 扩展 Iconfont 图标

发表于 分类于 Waline： 阅读次数： 本文字数： 139 阅读时长 ≈ 1 分钟

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>