从 iconfont 下载图标放到 vue-element-admin 项目后无法变色

最新推荐文章于 2023-12-04 11:50:57 发布
最新推荐文章于 2023-12-04 11:50:57 发布
阅读量258 收藏
点赞数 1
分类专栏： vue-element-admin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53612276/article/details/119817779
版权

这里贴一个从 iconfont 上面下载的svg 的内容

<svg t="1629426351249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4010" width="128" height="128"><path d="M514.125 30.085L17.34 391.021l189.755 584.007h614.061l189.756-584.007L514.125 30.085z m-54.341 484.66H327.439l-49.246-67.711 52.323-61.556h129.268v129.267z m73.867 270.846c0 21.545-9.233 24.622-30.778 24.622-24.622 0-30.778 0-30.778-24.622V367.012h61.557v418.579z m-58.478-433.968c0-12.312 3.078-33.856 30.778-33.856 24.622 0 30.777 21.544 33.855 33.856h-64.633z m175.434 277.001h-98.49v-95.412l95.412-3.077 52.32 49.244-49.242 49.245z m64.634-113.879H552.117V385.478l163.124-3.077 49.244 67.711-49.244 64.633z" p-id="4011" fill="#d81e06"></path></svg>

 将其中的 fill="#d81e06" 删掉即可

C语言国粹
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[vue-element-admin]-更改主题颜色
u013998349的博客
11-28 5448
更改主题颜色==更改侧边栏颜色==一、src/layout/components/Sidebar.index.vue二、src/styles/variables.scss 更改侧边栏颜色 一、src/layout/components/Sidebar.index.vue 可以看到侧边栏的index.vue里面引入了’@/styles/variables.scss’样式 二、src/styles/variables.scss 去element官网的(Color 色彩)中 https://element.el
vue-element-admin花裤衩项目，关于下载 svg 并放到文件夹之中，修改Icon字体图标的颜色样式问题
qq_43058760的博客
10-22 1239
首先，搜索并找到你需要的图标，将它采集到你的购物车里，在购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），后续生成的资源/代码都是以项目为维度的。 阿里字体图标库 Icon 点击下载图片，设置图标颜色如图所示 设置颜色为空 背景选白色 再点击svg下载 下载的图标放到项目文件 icons/svg文件夹里面 然后在图标在 编辑器里面去掉 fill="#ffffff"属性 最后就是要的效果，自动根据父级颜色变色了 好了，如果有好的方法记得分享一下。也是之
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
iconfont引入后不能变色的问题
Anyz Notebook
06-11 5123
项目中使用iconfont作为图标库，更新后发现icon颜色不会随着设置颜色改变，下载的是svg格式。 项目框架用的icon是可以变色的，所以打开可以变色的icon的文件和新下载的文件对比后发现： 新下载的icon的svg文件有写入 fill="#333333" 就是在下载svg文件时候，iconfont是有设置初始色的，把对应设置删除后尝试，可以正常使用。 在iconfont库有批量去色的按钮，可以批量处理。 css样式可以设置 #svg: { fill: red; } ...
引入阿里图标库（iconfont）后图标黑白问题
陈景夏
11-30 4430
Font Class引入方式不支持彩色图标。 想要运用彩色图标得通过Symbol方式引入，得以SVG的方式展示。 <svg class="icon" aria-hidden="true"> <use xlink:href="#对应的类名"></use> </svg> // 加个通用样式把，不然引入贼大。 .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColo
vue项目使用iconfont图标方法
时光乱了谁的心的博客
03-20 768
一、关于iconfont iconfont矢量图标库是由阿里妈妈MUX倾力打造的矢量图标管理、交流平台。iconfont主要为icon设计师们量身打造，专注于原创图标设计，集图标搜索、下载、上传、管理等多项功能于一体，同时还能够将图标转化为字体应用，方便应用于web前端。 二、优点 1、加载文件体积小，有利于优化 2、通过改变font-size、color就能自由变换大小，修改颜色，就像控...
iconfont在vue中的使用
Banana的博客
03-19 513
一、打开iconfont官网，搜索心仪的图标，加入购物车 二、添加至项目，可以选择新建，也可以选择已有项目 三、点击下方点击更新代码 四、在浏览器中打开此链接 五、在项目中新建文件如下，并把在浏览器中打开链接内容复制到icon.css中 六、在项目中导入改css，并应用 ...
SpringCloud VueAdmin-template实现简单的图书管理系统
qq_46239972的博客
10-11 989
SpringCloud VueAdmin-template实现简单的图书管理系统 这是一个使用Spring Cloud和VueAdmin-template实现的简单的图书管理系统。其功能比较简单，仅用以学习和巩固计算机技能。 运行效果： 登陆界面 管理员后台 借阅信息 书籍查询 添加新书 用户后台 借阅信息 申请借书 编辑用户信息 开发环境： IDEA JDK1.8 MYSQL8.0.11 使用技术： vue2、element ui、vueadmin-template、spring clou
vue3+element plus使用修改element的主题色问题
a10534126的博客
03-09 1302
用vue的cli脚手架搭建了一个vue3项目（用的node-sass），使用element plus库，按照饿了么官方文档自定义主题操作后，发现项目报错如下： 感觉很神奇，当初vue2和element我就是这样类似操作的呀，都可以成功的嘛 解决办法：经过一系列排查后发现，将node-sass换成dark-sass就可以解决问题了。 原因分析 按照报错提示进入到node_modules/element-plus/packages/theme-chalk/input-number.scss文件发现 这些s
【vue 后台管理模板 ranAdmin 支持ant-design/ant-design/electron-plus/electron-plus-electron】
ranshakalove的博客
01-12 1730
vue 后台管理模板 支持ant-design/ant-design/electron-plus/electron-plus-electron
vue中使用iconfont图标库
weixin_44635214的博客
07-09 468
阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用 创建SvgIcon组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export def
vue: 线上项目element-ui的icon偶尔乱码问题
最新发布
qq_43340606的博客
12-04 1278
而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文，所以通过伪元素来展示的图标如el-icon-arrow:before{ content: “\e6df”}，编译之后就变成了el-icon-arrow:before{ content: “”}，“”便是一个双字节字符，导致出现乱码。线上环境偶尔会复现，
element-ui的el-menu路由模式下选中无颜色
一只程序猿
06-17 4029
1，el-menu跳转时如果按照以下写法无疑看起来感觉很鸡肋，而且index这个属性感觉并没有任何作用 <el-menu-item class="menutitle" index="/webB/index" route="/webB/index" v-show="menu.index"> 2，在el-menu标签中直接开启router模式( :router="true" )，就会...
【Abp VNext】实战入门（五）：【13】前端管理界面 vue-element-admin —— 左侧菜单自定义图标及图标大小控制
刘永洪的博客
02-28 3463
一、前言： 使用 vue-element-admin 避免不了的是自定义左侧菜单图标以及控制图标大小，今天就记录一下如何操作。 二、操作步骤： 去阿里图标库查找需要的图标，然后下载对应的SVG文件：www.iconfont.cn 把.svg文件拷贝到项目根目录：icons/svg 在路由router/index.js 中配置新增的svg图标名：meta:{icon:‘home’} 这样处理后已经可以在左侧菜单中显示对应图标了，但是有三个问题要解决： 自定义图标太小不受控制：自定义图
vue-element-admin之修改侧边栏的icon图标以及图标颜色
热门推荐
Fxhani的博客
06-11 1万+
1.修改侧边栏的icon图标 ???? 如果在admin提供的icon库中没有你需要的图标，可以到https://www.iconfont.cn/上选择并生成自己的业务图标库 在admin指南中可以看到这句话，我们来实际操作一波 打开网址后，可以看到 在图标库里可以搜索我们需要的图标 搜索之后，点击下载，就下载到我们的文件夹中了，可以在文件中找到它，给它重命名 打开我们的项目只要把它复制到icon中的svg下面，就有我们自己的图标了 引入即可 2.修改图标的颜色，随着点击的字体颜色改变
uniapp/vue 引入iconfont并动态修改icon颜色
搬砖小鱼，请多指教呦
05-24 1万+
一、引入iconfont iconfont官网： iconfont-阿里巴巴矢量图标库 1-选择想要的icon至购物车 2-添加至自己的项目 3-这里我选择的font，属于个人喜好，觉得更方便，还有其他方式选择，步骤差不多，点击生成代码，下载至本地（当然你也可以选择在线使用） 4-将iconfont.css等添加至自己的项目 5-在main.js中引入css文件 至此就可以使用我们的iconfont 使用方法如下 在iconfont.css中有我们下载的icon名..
1.vue-element-admin使用svg图标
qq2276031的博客
07-28 5204
vue-element-admin基础模板中，已经封装好了使用svg图标的组件，所在路径为：@/icons，在其中我们可以找到相关的代码，所有在文件夹中的svg图片注册到全局中，可以在项目中任意地方使用。所以图标均可在 @/icons/svg。可自行添加或者删除图标，所以图标都会被自动导入，无需手动操作。 使用方式： <!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class--> <svg-icon icon-class="pass
vue项目使用iconfont（本地下载、彩色icon）
weixin_41292470的博客
08-13 1630
1.下载至本地 1.下载iconfont文件，包含iconfont.ttf、iconfont.css 2.iconfont.ttf 文件 转base64 3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置 @font-face { font-family: "iconfont"; src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) form
vue中如何使用iconfont图标
风如也的博客
03-04 1456
vue中引入iconfont图标 引入在线链接文件 如果开发过程中需要不断更新图标，为了避免多次下载文件到本地，可以先选择使用在线链接的图标文件 前面的步骤就不赘述了，直接讲如何在vue中引入 查看项目在线链接 我 选的是 Unicode 的形式 在项目中的 assets/css 文件夹下新建 global.css 文件，复制刚才生成的 font-face 代码，如何定义iconfont 类 @font-face { ... } .iconfont { font-family: "icon
快速搭建Vue前端项目：vue-element-admin实践
在本文中，我们将深入探讨如何搭建一个基于Vue和Element-UI的前端项目，以`vue-element-admin`为例，它是一个功能丰富的后台管理前端解决方案。首先，我们需要从GitHub上获取项目源代码，并了解其基本目录结构和关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值