jeecgboot 使用阿里图标库

1、进入阿里图标库

FontClass/ Symbol 前缀可修改 也可为默认的icon 引用时一致即可
Font Family 可修改

2、在src/components（其他目录也可以）下新建文件夹 iconfont，使用Fontclass模式时，需引入iconfont.css

将下载图标解压后，复制文件到iconfont下（demo可不复制）

3、在iconfont文件下创建文件common.less，将如下代码复制到common.less文件中

/* 引入 icon class 文件 */
@import  "./iconfont.css";

/* 设置使用字体的优先级 anticon 高 */
:global(.anticon) {  /* :global() 是为了覆盖全局class .anticon 的样式 */
  &:before {
    font-family: "anticon", "anticon-jeecg" !important;
    /* 默认样式是这样
        font-family: "anticon" !important;
    */
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

4、将common.less在全局文件中引入，这里是在src/App.vue中引入

// Fontclass模式
import '@/components/iconfont/common.less'
// 使用 symbol模式 支持多色
import '@/components/iconfont/iconfont.js'
1
2
3
4

5、在所需文件处，引 入图标

font-class模式 ： 

<i class="anticon-jeecg actionglasses1" style="font-size: 65px;"/>
anticon-jeecg 与icon项目的Font Family 对应
actionglasses1为icon项目的前缀和图片名称
1
2
3
4
5