JeecgBoot(iconfont) Icon图标扩展方法

最新推荐文章于 2025-03-27 10:52:44 发布
原创 最新推荐文章于 2025-03-27 10:52:44 发布 · 2.7k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #ant

项目背景

JeecgBoot项目中已经存在一些ICON可供选择，但是比较单一，不够丰富。
需要从Iconfont中引入图标，以丰富语义。

在这里插入图片描述
需要修改4处

  1. Iconfont官网新建项目， 下载iconfont 文件放到：src/components目录下
    在这里插入图片描述
    在这里插入图片描述

  2. 在 iconfont 文件下新建common.less
    在这里插入图片描述

  3. 将common.less在全局文件中引入，这里是在src/App.vue中引入
    在这里插入图片描述

  4. 在src/views/system/modules/i

最低0.47元/天 解锁文章
jeecgboot 使用阿里图标库
weixin_38673922的博客
09-15 516
FontClass/ Symbol 前缀可修改 也可为默认的icon 引用时一致即可。将下载图标解压后，复制文件到iconfont下（demo可不复制）Font Family 可修改。
JeecgBoot【iconfont】iCon图标扩展方法【亲测实践】
小帅丶的专栏
06-21 3715
项目背景 JeecgBoot项目中已经存在一些ICON可供选择，但是不一定满足业务所需。 因此可以从Iconfont中引入图标，以丰富icon。
【伸手党福利】【第一弹】jeecg-boot前端主要更改位置（网站标题栏图标、logo、登录后的logo、显示的标题文字、用户头像）
wwppp987的博客
05-09 9928
网站标题栏图标 位置 ant-design-vue-jeecg\public\index.html 在head当中加一行 <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon"> 然后将制作好的favicon.ico（一般是1616，最大是3232，否则有浏览器不兼容）放到 \ant-design-vue-jeecg\public 目录下（index.html的同级目录）
jeecg-boot登录页，首页修改标题栏及其他
ksw000的博客
12-31 9631
jeecg-boot登录页，首页修改标题栏及其他 网站标题栏图标 位置 ant-design-vue-jeecg\public\index.html 1、index.html标题图标在head第9行，替换掉然后复制ico到/public <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon"> 然后将制作好的favicon.ico（一般是1616，最大是3232，否则有浏览
Jeecgboot 自定义图标（彩色）
qq_44835285的博客
11-16 2102
JEECGBOOT自定义彩色图标更改
jeecg扩展自定义菜单图标
又菜又爱玩
12-03 3282
jeecg扩展自定义菜单图标 官方图标扩展文档：http://doc.jeecg.com/2043975 图标扩展jeecg扩展自定义菜单图标一、登录iconfont并添加项目1.添加项目2.添加图标到项目二、使用步骤1.引入库2.读入数据总结 记录一下在jeecg中菜单管理编辑选择菜单图标的时候添加扩展自定义图标供选择并使用， 一、登录iconfont并添加项目 1.添加项目 选择【资源管理】下拉框，选择【我的项目】，选择下图的紫色按钮添加项目 填写项目名称，前缀和font family,填写
jeecg boot 添加自定义图标，系统菜单缩回不正常的解决方法
weixin_38246613的博客
04-13 717
在\src\components\menu\index.js里面添加以下代码。
EasyUI Icon 图标扩展样式（1775个）
11-01
EasyUI图标扩展样式是一套专为开发者和设计师提供的丰富图标资源，总计包含了1775个不同的图标。这些图标在Web开发中广泛应用于各种用户界面，以增强网站或应用程序的视觉效果和用户体验。EasyUI是一种基于jQuery的...
EasyUI 扩展ICON图标
10-11
"EasyUI 扩展ICON图标" 提供了一个解决方案，它增加了1775个额外的图标，大大丰富了EasyUI的图标库。这些图标可能是矢量图形，可以在不同分辨率和尺寸下保持清晰，同时涵盖了各种常见的功能类别，如导航、操作、状态...
JEECG-页面按钮图标存放地址
gwcgwcjava的专栏
05-13 3740
JEECG页面按钮图标是用的easyui的图标，放到
各种菜单图标和样式图标
10-17
各种菜单图标和样式图标，开发过程中需要的各种图标这里基本都有。格式.png
JEECG UI标签库帮助文档
07-05
JEECG智能开发平台 UI标签库帮助文档
在JeecgBoot-Vue3项目中使用Iconify图标的完整指南
最新发布
Aimee_LL的博客
03-27 1094
在项目根目录打开或安装在devDependencies中要求：服务器能访问外网。
iconfont图标扩展
weixin_43297321的博客
03-11 664
以阿里巴巴的矢量图标库iconfont为例：https://www.iconfont.cn/ SVG上传生成图标 1、打开网页，点击上传云端按钮，进入上传页面，之后按照提示操作。 下载字体图标 1、把想要的图标加入购物车。 2、点击下载代码。 3、解压后的文件列表。 4、打开demo_index.html，里面是我们下载的图标的编码及详细使用方法，可自行根据下面提示步骤来做。 5、下面...
Jeecg前端修改标题Logo等
学而不思则忘，思而不学则die
09-13 3704
修改jeecg界面： 1：标签页文字：src\components\layouts\TabLayout.vue 2：底部友情链接：src\components\page\GlobalFooter.vue 3：登录页的平台名字和副标题、版权信息：src\components\layouts\UserLayout.vue 4：主界面的欢迎标题：src\components\page\GlobalHeader.vue 5：平台logo：src\assets\logo.svg 6：标签页图标..
Jeecg-Boot前端图片更改(网站 title 图标修改)
永远年轻
08-20 4028
title 图片修改 在位置：ant-design-vue-jeecg\public\index.html 的 head 头部标签中添加一行代码： <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon"> 然后将你制作好的 favicon.ico 放到 ant-design-vue-jeecg\public 目录下（index.html 同级目录） 效果截图 ...
jeecg修改网址上那个图标
xin915的博客
07-21 389
在public/index.html里面。图片的地址要和index.html同级。
JEECG-BOOT首页标题修改
weixin_43991822的博客
09-13 2611
JEECG-BOOT首页标题修改以及其它相关JEECG标志信息修改
修改网页logo图片
u012206730的专栏
07-25 822
在html的head代码区加入以下代码，保存刷新页面即可。 <link rel="icon" href="images/penguin.ico" type="image/x-icon" /> <link rel="shortcut icon" href="images/penguin.ico" type="image/x-icon" /> <link rel="b...
jeecgboot 替换图标
02-17
### 更换 JeecgBoot 中的自定义图标 在 JeecgBoot 项目中更换自定义图标可以通过修改前端资源文件来实现。具体操作如下： #### 修改前端配置文件 JeecgBoot 使用 Vue.js 和 Element UI 构建前端界面，因此图标通常由这些框架提供。为了引入新的图标集或更改现有图标，可以编辑 `src/assets/icons` 文件夹下的 SVG 文件[^3]。 如果希望全局替换默认图标库（例如从 Font Awesome 切换到 Ali Icons），则需调整 `main.js` 或者 `app.vue` 配置项中的样式导入路径以及组件注册逻辑[^4]。 ```javascript // main.js or app.vue import 'element-plus/lib/theme-chalk/index.css'; // 默认Element Plus主题 // 若要切换至阿里云矢量图标字体，则取消下面这行注释并删除上面一行 // import '@ali/tufei-iconfont/iconfont.css'; ``` 对于特定页面内的局部变更，可以在对应视图组件内部直接引用所需的新图标类名或者图片链接地址[^2]。 #### 更新依赖包 当涉及到第三方插件更新时，记得同步升级 package.json 中的相关版本号，并执行 npm install 来保持环境一致性[^1]。 ```bash npm install @fortawesome/fontawesome-free@latest --save ``` #### 自定义 Icon 组件 创建一个新的 icon 组件用于加载本地存储的 svg 文件作为自定义图形符号。这样做的好处是可以更加灵活地管理个性化的设计需求而不必受限于现成的图标集合。 ```vue <!-- src/components/CustomIcon.vue --> <template> <svg :class="className"> <!-- 插槽内容会渲染到这里 --> <use :xlink:href="'#' + iconName"></use> </svg> </template> <script lang="ts"> export default { props: ['iconName', 'className'] } </script> ``` 最后，在项目的公共入口处预载入所有可能用到的自定义图标实例，以便按需调用显示。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值