为什么这样做

JeecgBoot项目中已经存在一些ICON可供选择，但是不一定满足业务所需。
因此可以从Iconfont中引入图标，以丰富icon。

访问IconFont

https://www.iconfont.cn/

登录 IconFont

资源管理-我的项目

创建项目

项目名称、项目描述自定义即可

FontClass/Symbol前缀 随意命名 eg:action

Font Family 随意命名 eg:action-diyicon

查找所需图标

搜索自己所需，找到喜欢的鼠标移动上去点击第一个图标添加入库

去购物车(库)添加到项目

点击 添加至项目 选择创建的项目即可

下载到本地

iconfont操作完成。下载的压缩包解压备用

整合项目

创建iconfont文件夹

在src/components（其他目录也可以）下新建文件夹 iconfont，

使用Fontclass模式时，需引入iconfont.css
将下载图标解压后，复制文件到iconfont下（demo可不用复制）

创建common.less文件

并引入一下内容 XXX 为前面自己定义的内容前面演示定位为 action-diyicon

/* 引入 icon class 文件 */
@import  "./iconfont.css";/* 设置使用字体的优先级 anticon 高 */
:global(.anticon) {  /* :global() 是为了覆盖全局class .anticon 的样式 */&:before {font-family: "acticon", "acticon-XXX !important;/* 默认样式是这样font-family: "anticon" !important;*/}
}

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

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

自定义选择图标的TAB

代码路径 src\views\system\modules\icon\Icons.vue

`action-diyicon ${icon}` 注意不是单引号是` 键盘英文输入模式下左侧数字1前面的键

      <!--自定义图片--><a-tab-pane tab="自定义图标" key="7"><ul><li v-for="icon in icons.diyIcons" :key="icon"><i :class="[{'active':activeIndex === icon},`action-diyicon  ${icon}`]"  :title="icon" @click="chooseIcon(icon)"></i></li></ul></a-tab-pane>

1.先定义自定义图标数据常量 diyIcons

2.对diyIcon进行赋值(数据来源于iconfont.css的名称) eg:
.actionshebei3:before {content: "\e625";
}只需要 actionshebei3 即可

再次查看图标

会发现多了一个自定义图标的tab 不要在乎图标好看不随便找了几个而已

修改index.js文件

在src/components/menu/index.js文件中处理显示自定义图标

//diyicon-icon 主要是这部分
      if (icon !== 'none' && icon !== undefined && icon.indexOf('action')!=-1) {
        let className = "action-diyicon " + icon;
        return ;
      }

    renderIcon (icon) {//diyicon-iconif (icon !== 'none' && icon !== undefined && icon.indexOf('action')!=-1) {let className = "action-diyicon " + icon;return <i class={className} style='margin-right:8px;'></i>;}if (icon === 'none' || icon === undefined) {return null}const props = {}typeof (icon) === 'object' ? props.component = icon : props.type = iconreturn (<Icon {... { props } }/>)}},

至此改造完毕

JeecgBoot【iconfont】iCon图标扩展方法【亲测实践】相关推荐

计算机桌面曝光,win7电脑桌面壁纸曝光过高影响图标怎么办？亲测实用解决方法...
原标题:win7电脑桌面壁纸曝光过高影响图标怎么办?亲测实用解决方法现在用win7系统的人应该还是挺多的吧,虽然说windows家族已经升级到现在的win11了,相信大多数人家用的电脑系统还是win ...
电视android已停止运行是什么意思,智能电视提示应用停止运行，三种方法亲测有效！...
原标题:智能电视提示应用停止运行,三种方法亲测有效! 智能电视使用时间一长,或者是使用不当总会出现一些问题,当电视机页面出现"某软件"已经停止运行提示的时候,是什么原因导致的?自己 ...
笔记本识别不出来U盘的解决方法 [亲测有效]
笔记本识别不出来U盘的解决方法 [亲测有效] 转载连接https://jingyan.baidu.com/album/f96699bbfa1491894e3c1bc3.html?picindex=4 ...
vue项目改图标_vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 ...
windows 2003 远程桌面无法使用剪贴板共享纯文本的解决方法(亲测可用）
windows 2003 远程桌面无法使用剪贴板共享纯文本的解决方法(亲测可用) 参考文章: (1)windows 2003 远程桌面无法使用剪贴板共享纯文本的解决方法(亲测可用) (2)https: ...
微信开发者解除绑定微信公众号的方法,亲测有效
微信开发者解除绑定微信公众号的方法,亲测有效微信关注 '公众平台安全助手' 点击'绑定查询',选择'微信号绑定账号',出现以下页面: 点击列表右边的箭头 ,选择'解除绑定'即可: 这个问题相信对很多 ...
为Android购买多个改装微信,分享外面高价售卖的修改微信号方法亲测成功仅限安卓手机...
分享外面在高价售卖的微信号修改方法亲测成功仅限安卓手机这个方法今天在外面看到很多人在代修改,转卖方法!小编觉得还是有必要发出来让大家去动手尝试一下! 实际上这个修改微信号的功能在内测版微信就可以 ...
网上的音乐怎么下载成mp3格式歌曲？这3种一键下载的方法亲测好用！
网易云音乐客户端是支持直接下载音乐的,但是有时候是加密格式,今天就教大家3个直接网页下载mp3格式音乐的方法,下载之后直接就能播放,亲测好用! 方法一:审查元素下载一个简单有效的下载方法,不需要使用 ...
Ubuntu连接不了网络的解决方法亲测可行经验
突然发现Ubuntu连不上网络,网络打问号或者右上角也没有网络图标:楼主一般通过前两步就解决了,大家自行查阅网络服务名称,OK直接进入正题通过命令行方式重启网络如果你使用的 Ubuntu 服务器版 ...

JeecgBoot【iconfont】iCon图标扩展方法【亲测实践】

为什么这样做

访问IconFont

登录 IconFont

创建项目

查找所需图标

去购物车(库)添加到项目

下载到本地

整合项目

创建iconfont文件夹

创建common.less文件

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

自定义选择图标的TAB

再次查看图标

修改index.js文件

至此改造完毕

JeecgBoot【iconfont】iCon图标扩展方法【亲测实践】相关推荐

最新文章

热门文章