iconfont symbol引入使用有彩色，通过class引入没有彩色

最新推荐文章于 2024-02-19 11:17:46 发布
最新推荐文章于 2024-02-19 11:17:46 发布
阅读量818 收藏 7
点赞数 4
文章标签： iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44832362/article/details/129786894
版权

  1. 通过class引入使用

第一步

第二步

第三步

第四步

第五步是

下面的压缩包挤压出来，然后把文件夹放到我们的项目，然后在main.ts引入 iconfont.css即可使用

然后就可以在页面中看到我们的图标了，不过这种方式，不支持下载彩色图标，下面的图标下载的应该是彩色的，但是class方式不支持，要想是用彩色图标就使用symbol 方式引入

  1. 通过symbol引入使用

这里的第一到第四步和上面的一样

第五步

第六步

使用自己生成的代替实例的路径

第七步

第八步，展示图标

彩色图标就出来了

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名..
使用iconfont彩色图标
aoban0653的博客
03-12 1331
概述：采用下载至本地导入，然后在前端代码里引用这个js。 步骤： 1、找到需要的图片，点击“添加入库” 2、可以添加到项目 3、选择Symbol，下载到本地 4.在本地下载路径中解压，将iconfont.js复制到项目src/assets路径下 ------> 5.在<style>加入通用css代码（引入一次...
icon添加到项目中，下载本地之后 icon无颜色解决办法
Lydia
02-19 729
5.生成文件夹，将文件夹下的iconfont-weapp-icon.css文件，粘贴到static文件夹里，最后再main.js中引入即可。2.main.js中引入 import "./assets/iconfont/iconfont.css";1.将下载的文件放入 assest 文件内，图标文件夹重命名为iconfont。3.下载插件-npm install -g iconfont-tools。4.在图标文件夹内-cmd-输入命令 iconfont tools。
iconfont引入后不能变色的问题
Anyz Notebook
06-11 5411
项目中使用iconfont作为图标库，更新后发现icon颜色不会随着设置颜色改变，下载的是svg格式。 项目框架用的icon是可以变色的，所以打开可以变色的icon的文件和新下载的文件对比后发现： 新下载的icon的svg文件有写入 fill="#333333" 就是在下载svg文件时候，iconfont是有设置初始色的，把对应设置删除后尝试，可以正常使用。 在iconfont库有批量去色的按钮，可以批量处理。 css样式可以设置 #svg: { fill: red; } ...
解决iconfont图标symbol引用方式，图标不显示及不能变色的问题
fangcaojushi的博客
06-28 3695
解决iconfont图标无法改色 图标改色的关键是改color,还是改fill
阿里iconfont 无法改变图标颜色（fontclass，Unicode）
qq_26642611的博客
04-13 1194
如果其他方法都没用，那么试试取消勾选彩色吧
Vue-iconfont：优雅引入Iconfont.cn图标，支持font-class与symbol
Symbol 引入方式是通过使用svg的symbol元素来引入图标。这种方式不需要修改HTML结构，而是在JavaScript中配置使用的图标。 ```html <svg><use xlink:href="#icon-example" /> ``` 这里的 `#icon-example` 是svg ...
​如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标（svg图标）
bing103425的博客
07-25 2604
1.打开iconfont，并登录账号 http://www.iconfont.cn/     2.挑选自己喜欢的图标，加入购物车       3.打开购物车 =&gt; 添加至项目 =&gt; 新建项目目录 =&gt; 确定         4.进入我的项目，点击Symbol，点击生成代码       5.将生成的代码引入index.html ...
iconfont使用方法
最新发布
01-10
对于彩色图标的使用，由于 Unicode 和 Font class 方式仅能呈现黑白效果，因此推荐采用 Symbol 方法。此方法允许更灵活的颜色控制以及更好的兼容性[^1]。 ```html <use xlink:href="#icon-name"></use> ``` ...
uniapp使用彩色图标
11-16
1. 在iconfont官网上下载需要的彩色图标，下载格式选择Symbol。 2. 将下载的文件解压，将其中的iconfont.css和iconfont.ttf文件复制到uniapp项目的static文件夹下。 3. 在App.vue文件中引入iconfont.css文件。 ```...
Safari浏览器下antd pro 引用的iconfont图标没颜色
oldpubcat的博客
12-14 775
突然发现Safari下的图标显示的是黑色的框框图标。 经过一系列的尝试，发现需要把iconfont的图标删除，然后再一个一个的依次上传，修改名字，修改项目的iconfont地址和图标的名称，然后就可以了。 小问题，记录一下。 网上又搜了一下，发现有人说：当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在symbol的js文件中
引入阿里图标库（iconfont）后图标黑白问题
陈景夏
11-30 4760
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
解决uni-app无法使用icon-font彩色图标(Symbol方式)
FantasyWeirdo的博客
07-08 2228
解决uni-app无法使用icon-font彩色图标(Symbol方式)
如何在 iconfont 中使用彩色图标
bug处理进行时
02-04 1702
如何在 iconfont 中使用彩色图标
svg 图标颜色无法修改的问题
a432143的博客
06-20 4287
iconfont图标symbol引用方式，有的图标不能通过设置color样式来修改颜色的解决办法 现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。 <svg class="icon" aria-hidden="true" style="color:red;...
iconfont 的symbol字体如何修改颜色 / svg如何修改颜色？
m0_66051368的博客
08-24 1085
svg
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 9284
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
阿里巴巴iconfont svg图标不能更改颜色的解决方法，iconfont symbol怎么改颜色
qq_37568942的博客
10-12 5480
1.svg图标 带有 fill 属性，默认是带有颜色的，想要修改先把原fill颜色去掉，如下： 2. 在代码种修改对应颜色即可 使用 svg 图标： <svgclass="svg"aria-hidden="true"> <usexlink:href="#icon-test"></use> </svg> css 修改颜色： .svg{ height:20px;width:20px; } .svg:last...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZL随心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值