阿里图标icon二次引入+ 图标引入后是黑色解决办法。

最新推荐文章于 2023-12-14 05:10:19 发布
最新推荐文章于 2023-12-14 05:10:19 发布
阅读量1k 收藏 5
点赞数 3
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67021283/article/details/130146990
版权

 阿里图标icon二次引入

第一到第三步。

 第四步 找到文件夹复制代码

  阿里图标icon二次引入 ， 引入后你就会发现 是黑色 没有原来图标的颜色

就像这种

如何让本来的颜色出来呢 ?

1.找到项目设置打开

 2.勾选彩色

 

 3.更新代码

 4. 根据文章开始重新引入代码

   <div  class="iconfont icon-ldybaoxiuguanli"></div>

 

攻城狮羊羊
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue element项目引入icon图标的方法
08-27
主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下
uni-app里引入阿里彩色矢量图标，结果显示黑白的解决方案
前端小白, 稀土：雩风十六
03-19 2236
引入iconfont后，原本彩色的图标变成黑白，彩色部分甚至一坨黑，该问题的解决方案。
html引入高德地图demo
07-24
此demo的功能是在html文件中，引入高德地图API，简单的入门小例子。
阿里云产品图标 icon
05-10
亿图图示使用 edmax 原图和橙系都有，合计200多个
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
09-01
主要介绍了BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法,需要的朋友可以参考下
数字图像处理之matlab大作业：美图秀秀
10-28 6635
数字图像处理之matlab基础
Iconfont-阿里巴巴矢量彩色图标显示黑白解决方法 矢量图标
热门推荐
王敬辉的博客
10-09 1万+
使用阿里图标 iconfont 时发现彩色的图标都变成黑色的了。 查阅后发现 iconfont.css 只能设置单色的图标，要想使彩色图标，需要使用 svg (symbol)模式 Unicode。方法如下 symbol引用（阿里巴巴矢量图标库使用方法） 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。 特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那...
uni 加入图标_uni-app引入iconfont字体图标
weixin_39791152的博客
12-19 175
1 首先进入你的iconfont项目很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目,解压完就是这个了 ,然后把圈起来的放到你的项目文件里面 ,记得引入的时候路径别错了,随便放,引入路径对了就行进入这个网站, 然后把刚刚解压的文件打开 找到找不到?打死你 重新去官网下载,然后把这个文件移入到桌面后, 打开上个网站选择文件选择刚刚你移入的那个iconfont.ttf点击...
vue项目 - svg格式的icon图标无法显示颜色
weixin_50477991的博客
08-10 1578
前言 在项目中遇到svg格式的icon图标无法显示颜色，这个问题。尝试过很多方法，最后发现不是代码的问题，而是iconfont图标库中没有配置好。 1. 发现问题如下 当点击菜单选项时，icon和文字同时变色。 2. 解决方案 第一步：在iconfont图标库中找到该图标，点击批量操作 第二步：图标去色 第三步：重新下载图标至项目文件中，最后重启项目 这时，图标就有颜色啦 ...
iconfont图标底色显示黑色背景
最新发布
weixin_61873587的博客
12-14 448
在iconfont下载了几个图标，往AXURE上面粘贴的时候（用的复制粘贴的方法），变成了黑底的图片，下图的样子，遍寻解决方案未果。后面死马当活马医，文件夹里拉着下载的图标直接放进AXURE里面，就解决了。
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
Flutter IconButton设置完为什么是黑色的？
u013095264的博客
10-14 1932
在用Flutter的IconButton组件时，发现有的图标设置显示出来是黑色的，我们看看写法 IconButton(icon: Icon(Icons.account_circle,size: px(60),color: Colors.lightBlue,) 后面有个color的属性，我们打开源码找到color参数的注释有下面一段话 看完豁然开朗，所以一般情况下我们需要指定color的颜色属...
ICO文件缩略图显示错误
一个早起的程序员
12-15 744
这个问题是因为系统缓存导致，使用win + r打开运行，输入ie4uinit -show回车进行图标缓存清理即可。
iconfont引入后不能变色的问题
Anyz Notebook
06-11 4958
项目中使用iconfont作为图标库，更新后发现icon颜色不会随着设置颜色改变，下载的是svg格式。 项目框架用的icon是可以变色的，所以打开可以变色的icon的文件和新下载的文件对比后发现： 新下载的icon的svg文件有写入 fill="#333333" 就是在下载svg文件时候，iconfont是有设置初始色的，把对应设置删除后尝试，可以正常使用。 在iconfont库有批量去色的按钮，可以批量处理。 css样式可以设置 #svg: { fill: red; } ...
总结：引入Iconfont-阿里巴巴矢量图标库的三种方式，小白必看，看了就会~
止水Itachi
06-11 4777
1、首先，百度搜索“阿里矢量库”，点进去，然后注册一个账号登录进入。 2、比如你想要的一个购物车图片，搜索框里输入“购物车”，点击搜索。 3、选择加入你想要的购物车图标，点击框住的购物车图标，不要点线面的下载图标哦 4、此时在你的右上角购物车中已加入进去，当然，你可以选择同时加入多个图标进入你的购物车，在这里我加入了两种图标。 5、点开你的右上角购物车，选择“添加至项目”。 6、点击新建文件夹 7、随意命名，在这里我命名为“举例子”，然后确定。 8、未完待续，明天更新。。。 ...
解决阿里图标引入彩色图标却是黑色的问题
薇z的博客
08-09 518
解决阿里图标引入彩色图标却是黑色的问题
vue引入阿里彩色矢量图标
池海
12-30 1260
1.将喜欢的图标添加到库中后加入项目，使用Symbol的方式下载到本地 2.下载后将文件解压加入到你的项目中： 3.在main文件中引入入iconfont.css和iconfont.js文件 4.打开iconfont.css文件，将以下代码加进去 [class^="el-icon-ch"], [class*=" el-icon-ch"]/*这里有空格，名字随意*/* { font-fam...
解决使用阿里巴巴iconfont页面显示小方块问题
HL477的博客
11-05 4126
1、我们把下好的字体图标引入到我们需要的文件夹中： 我这里给改名叫font了便于使用，原文件名字不是这个（大家也可以像我一样改成这个名字） 2、引入所需要的代码 @font-face 和 .iconfont 里面的代码在 iconfont.css 文件中 前两个就是 4、调整好了我们打开页面发现页面只显示了两个小方块 解决办法：只需添加一行代码即可（引入这个iconfont.css文件） 5、最后我们就能看到我们想要的结果了 ...
阿里巴巴iconfont svg图标不能更改颜色的解决方法，iconfont symbol怎么改颜色
知之为知之，不知为不知
07-28 3427
1. svg图标 带有 fill 属性，默认是带有颜色的，想要修改先把原fill颜色去掉，如下： 2. 在代码种修改对应颜色即可 使用 svg 图标： <svg class="svg" aria-hidden="true"> <use xlink:href="#icon-test"></use> </svg> css 修改颜色： .svg { height: 20px; width: 20px; } .svg:last-of-t...
阿里巴巴icon图标库怎么在项目中引入使用
07-12
要在项目中引入阿里巴巴的 Icon 图标库，你可以按照以下步骤进行操作： 1. 在阿里巴巴矢量图标库（https://www.iconfont.cn/）上搜索你需要的图标，并将其添加到你的图标项目中。 2. 添加完成后，点击右上角的 "购物车" 图标，进入购物车页面。 3. 在购物车页面，选择需要下载的图标，然后点击 "添加至项目" 按钮。 4. 在弹出的对话框中，选择你的项目或创建一个新项目，并点击 "确定" 按钮。 5. 进入项目详情页后，点击 "下载代码" 按钮。 6. 在下载代码页面，选择适合你项目的图标格式（如字体、SVG、PNG等），然后点击 "下载" 按钮。 7. 下载完成后，解压缩文件，你会得到一个包含了图标文件的文件夹。 8. 将解压后的图标文件夹复制到你的项目中，通常可以将它放在项目的静态资源目录（如 `src/assets/icons`）下。 9. 在你的项目中的 HTML 或 CSS 文件中引入图标文件。 例如，在 HTML 文件中使用图标字体的示例： ```html <link rel="stylesheet" href="path/to/iconfont.css"> ``` 然后，在需要使用图标的地方，使用相应的类名来显示图标： ```html <i class="iconfont icon-xxx"></i> ``` 这样，你就可以在项目中引入并使用阿里巴巴的 Icon 图标库了。请确保在引入图标文件之前，先下载并解压缩了相应的图标文件，并将其放置在正确的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值