JeecgBoot(iconfont) Icon图标扩展方法

最新推荐文章于 2023-09-15 16:31:48 发布
最新推荐文章于 2023-09-15 16:31:48 发布
阅读量2.4k 收藏 5
点赞数 2
分类专栏： JeecgBoot 文章标签： vue ant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshineTing2/article/details/109742178
版权
项目背景

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

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

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

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

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

最低0.47元/天 解锁文章
zlting~
关注
专栏目录
基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程（一）图标svgicon的使用
宁波阿成的博客
07-03 388
基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程（一）图标svgicon的使用
Jeecgboot 自定义图标（彩色）
qq_44835285的博客
11-16 1796
JEECGBOOT自定义彩色图标更改
JeecgBoot【iconfont】iCon图标扩展方法【亲测实践】
小帅丶的专栏
06-21 3219
项目背景 JeecgBoot项目中已经存在一些ICON可供选择，但是不一定满足业务所需。 因此可以从Iconfont中引入图标，以丰富icon。
jeecgboot 使用阿里图标库
最新发布
weixin_38673922的博客
09-15 369
FontClass/ Symbol 前缀可修改 也可为默认的icon 引用时一致即可。将下载图标解压后，复制文件到iconfont下（demo可不复制）Font Family 可修改。
jeecg boot 添加自定义图标，系统菜单缩回不正常的解决方法
weixin_38246613的博客
04-13 555
在\src\components\menu\index.js里面添加以下代码。
jeecg扩展自定义菜单图标
又菜又爱玩
12-03 2796
jeecg扩展自定义菜单图标 官方图标扩展文档：http://doc.jeecg.com/2043975 图标扩展jeecg扩展自定义菜单图标一、登录iconfont并添加项目1.添加项目2.添加图标到项目二、使用步骤1.引入库2.读入数据总结 记录一下在jeecg中菜单管理编辑选择菜单图标的时候添加扩展自定义图标供选择并使用， 一、登录iconfont并添加项目 1.添加项目 选择【资源管理】下拉框，选择【我的项目】，选择下图的紫色按钮添加项目 填写项目名称，前缀和font family,填写
JEECG-页面按钮图标存放地址
gwcgwcjava的专栏
05-13 3663
JEECG页面按钮图标是用的easyui的图标，放到
EasyUI 扩展ICON图标
10-11
"EasyUI 扩展ICON图标" 提供了一个解决方案，它增加了1775个额外的图标，大大丰富了EasyUI的图标库。这些图标可能是矢量图形，可以在不同分辨率和尺寸下保持清晰，同时涵盖了各种常见的功能类别，如导航、操作、状态...
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
各种菜单图标和样式图标
10-17
各种菜单图标和样式图标，开发过程中需要的各种图标这里基本都有。格式.png
JEECG UI标签库帮助文档
07-05
JEECG智能开发平台 UI标签库帮助文档
iconfont图标使用方法
weixin_43798943的博客
03-18 2527
1.把所需图标添加至购物车 2.点击添加至项目，创建项目并命名。 iconfont的使用方式有三种：unicode，font class，Symbol。 这里使用font class。每一个图标下面都有一个类名。 点击查看在线链接生成在线链接。 这样后面继续添加图标的时候只需更新在线链接即可，再把项目中原有的链接替换。 注意点： 小程序中无法引入在线链接。 解决办法： 1-浏览器打开此链接，全选复制网页内容。 2-在项目合适的地方新建iconfont.wxss文件 3-把第一步复制的东西粘贴到iconfo
iconfont图标扩展
weixin_43297321的博客
03-11 492
以阿里巴巴的矢量图标库iconfont为例：https://www.iconfont.cn/ SVG上传生成图标 1、打开网页，点击上传云端按钮，进入上传页面，之后按照提示操作。 下载字体图标 1、把想要的图标加入购物车。 2、点击下载代码。 3、解压后的文件列表。 4、打开demo_index.html，里面是我们下载的图标的编码及详细使用方法，可自行根据下面提示步骤来做。 5、下面...
Jeecg前端修改标题Logo等
学而不思则忘，思而不学则die
09-13 2891
修改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 3796
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-boot前端主要更改位置（网站标题栏图标、logo、登录后的logo、显示的标题文字、用户头像）
wwppp987的博客
05-09 9329
网站标题栏图标 位置 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修改网址上那个图标
xin915的博客
07-21 303
在public/index.html里面。图片的地址要和index.html同级。
jeecg-boot登录页，首页修改标题栏及其他
ksw000的博客
12-31 8816
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，否则有浏览
iconfont Logo图标库如何点击icon图标改变颜色
07-17
要使用 iconfont Logo 图标库，并实现点击图标改变颜色的效果，你可以按照以下步骤进行操作： 1. 在 iconfont 网站上选择你需要的 Logo 图标，并将其添加到购物车。 2. 在购物车中下载图标库文件，其中通常包含了一个 CSS 文件和一个字体文件。 3. 将下载的 CSS 文件和字体文件引入到你的 HTML 文件中。 HTML: ```html <link rel="stylesheet" href="path/to/iconfont.css"> ``` 4. 在 HTML 文件中插入相应的图标。 HTML: ```html <i id="my-icon" class="iconfont icon-logo"></i> ``` 5. 使用 CSS 设置图标的初始颜色和点击后的颜色。 CSS: ```css .icon { color: #000; /* 设置初始颜色 */ cursor: pointer; /* 添加手型光标以表示可点击 */ } .clicked { color: #f00; /* 设置点击后的颜色 */ } ``` 6. 使用 JavaScript 添加点击事件监听器，并在点击时改变图标的颜色。 JavaScript: ```javascript const icon = document.getElementById('my-icon'); icon.addEventListener('click', function() { icon.classList.toggle('clicked'); }); ``` 确保将 "path/to/iconfont.css" 替换为你实际下载的 CSS 文件的路径。同时，根据你的需求修改图标的类名、颜色和样式。 这样，当你点击图标时，它会切换到 clicked 类，从而改变图标的颜色为点击后的颜色。 请注意，具体的类名、颜色和样式可能根据你使用的 iconfont Logo 图标库而有所不同，你需要参考该图标库的文档或示例来确定正确的类名和样式。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值