vue项目引入彩色iconfont图标

已于 2022-03-29 10:42:28 修改
阅读量2.4k 收藏 11
点赞数 4
文章标签： vue.js vscode html
于 2022-03-29 08:56:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yummy_yuyu/article/details/123810717
版权
本文介绍了在Vue项目中引入彩色Iconfont图标的两种方法。首先，详细讲解了从iconfont官网下载并常规引入图标的过程。接着，针对下载的Font class类型图标，提供了不需重新下载的解决办法。第一种方法是利用iconfont-tools生成并引入iconfont-weapp-icon.css文件；第二种方法是直接在main.js中引用iconfont.css和iconfont.js文件。这两种方法都能使图标显示为彩色。
摘要由CSDN通过智能技术生成

做项目的时候经常会使用到iconfont图标库，在项目开始的时候提前想好需要什么图标，最好是多下载几个可替换的同类型图标，宁滥勿缺（别问，问就是得到了教训），无色的还是彩色的，这点很重要。

首先了解一下如何在项目中使用iconfont图标

进入官网iconfont图标库搜索想要的图标

添加到项目中，点确定 ，没有项目就在旁边的加号新建

  

选择Font class,点击下载至本地，选择自己要放置在项目中的位置 

最低0.47元/天 解锁文章
公主打码
关注
动态修改iconfont图标配色
Jinuss的博客
10-08 466
iconfont字体库图标symbol方式，动态修改颜色
在uniapp、vue 中引入iconfont图标
weixin_48789376的博客
04-13 588
1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车 2、再将图标添加到项目中，没有项目的，可以先新建一个项目 3、将刚刚选的图标下载到本地 4、解压后，将需要的文件添加到项目中 5、复制以下代码，将iconfont.css中的内容替换 将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前： 替换后：再复制的内容连接前面要加上https 6、再在app.vue文件中引入样式 7、使用 <view class="iconfont icon
在VUE项目中使用iconfont彩色图标
轻风细雨_林木木
06-10 2925
1.进入main.js文件，引入iconfont.js /* 彩色iconfont */ import '@/xxx/iconfont.js' 2.进入对应的模块，添加对应的css类 .font-icon { width: 2em; height: 2em; fill: currentColor; overflow: hidden; } 3.在指定位置引入，注意类名写对（font-icon），#iconresou是demo页面里面的名字 <svg class="font-icon"
vue20的可变彩色svg图标方案
08-10
vue2.0的可变彩色svg图标方案
vue引用阿里彩色图标（symbol引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 5660
引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...
【VUE中使用彩icon色图标】
谢少军的博客
06-01 1047
vue中使用icon彩色图标
vue 中使用阿里iconfont (含有彩色图标，引入外部js文件)
qq_41152898的博客
11-15 7808
在main.js中 import './assets/images/iconfont/iconfont.css' require ('./assets/images/iconfont/iconfont.js') 跟目录（src）下的asssets......文件； assets / images / iconfont中的东西 就是你下载的文件 解压出来的 在组件中使用的话 &lt...
vue iconfont symbol 彩色图标封装
赛朋博客 2077
12-16 359
想要引入下图所示的 iconfont 彩色图标，必须使用 symbol 引用，其原理是 svg 合集。但是根据官方提供的使用方法来看并不方便，需要进行封装。 编码 main.js中引入下载好的iconfont.js import './PATH/TO/YOUR/iconfont.js' 新建Icon-Svg.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:hre
​如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标（svg图标）
bing103425的博客
07-25 2482
1.打开iconfont，并登录账号 http://www.iconfont.cn/     2.挑选自己喜欢的图标，加入购物车       3.打开购物车 =&gt; 添加至项目 =&gt; 新建项目目录 =&gt; 确定         4.进入我的项目，点击Symbol，点击生成代码       5.将生成的代码引入index.html ...
uniapp项目使用iconfont彩色图标
weixin_43926731的博客
09-16 2188
uniapp项目使用iconfont彩色图标 在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。 搜索图标 打开icongont官网搜索自己想要的图标，以微信图标为例。 点击自己想要的彩色图标加入到购物车，再点击添加至项目 根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹 下载到本地 这个地方选择Font class，然后点击下载至本地 解压压缩
VUE3项目中引入单色和彩色字体图标解决方案
最新发布
m0_37873510的博客
05-31 969
vue3项目下引入单色和彩色字体图标的用法
（iconfont问题解决）Vue引入彩色iconfont
Wu_JingYi0829的博客
08-15 1074
Vue引入彩色iconfont的步骤： 在iconfont官网上选好自己喜欢的图标加入购物车，添加到项目。 将压缩包下载至本地，引入下图几个文件。 一般的图标引入方式如图所示： 引入有颜色的图标时，图标的颜色会是设定的默认颜色；此时需要如此引入： 第一种是单个图标的引入 <span class="item-title-icon"> <svg class="icon" aria-hidden="true" > <use xlink:
vue项目 - svg格式的icon图标无法显示颜色
weixin_50477991的博客
08-10 1796
前言 在项目中遇到svg格式的icon图标无法显示颜色，这个问题。尝试过很多方法，最后发现不是代码的问题，而是iconfont图标库中没有配置好。 1. 发现问题如下 当点击菜单选项时，icon和文字同时变色。 2. 解决方案 第一步：在iconfont图标库中找到该图标，点击批量操作 第二步：图标去色 第三步：重新下载图标至项目文件中，最后重启项目 这时，图标就有颜色啦 ...
vue项目使用iconfont（本地下载、彩色icon）
weixin_41292470的博客
08-13 1661
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图标及使用彩色图标
-
02-13 3003
单色图标的使用 1、首先将选择好的图标下载到本地 2、将iconfont.css文件以及后缀为 .eot .ttf .woff .svg的文件加入到项目文件夹中 3、在项目的main.js文件中引入iconfont.css样式文件， import "./assets/styles/iconfont.css" 4、注意在iconfont.css文件中根据自身情况修改引用的其他四个文件的路径，否则报错 5、接下来就是在项目中使用啦，单色图标直接使用图标对应的uniCode编码，以及给标签加ico
vue 项目引用 iconfont 彩色图标
票票的博客
04-28 753
1.先下载 iconfont 图标库到本地，解压放到项目assets或static文件夹下 2. 在 main.js 中引入该文件 import './assets/font/iconfont.css' import './assets/font/iconfont.js' 3.组件内使用 <svg class="icon-font"> <use xlink:href="#iconPC-74"></use> </svg> ...
在vue中使用iconfont多色图标
jiurikeai的博客
03-03 1630
1.新建一个项目，用于存放该项目应用的所有图标，项目名称自定义。 2.挑选自己心仪的图标，并点击添加入库 3.点击导航栏上的“购物车”图标，查看自己添加入库的图标，并添加至项目 4.进入自己的项目库，选择symbol 引用，点击查看在线链接 5.在vue项目中新建一个js文件，文件名自定义，将点击的在线链接里面的内容全部复制到js文件中 6.在main.js中全局引用该js文件 7.将icon图标放至相应的位置，用css样式width、..
vue引用阿里彩色图标（symbol引用）-封装自己的icon组件
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 789
关于如何引入彩色的阿里图标，请参考另一篇博客： vue引用阿里彩色图标（symbol引用）_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120322471接下来要封装出自己的icon组件，方便使用。 第一步：在components文件中新建一个组件（我的叫cjIcon.vue） <template> <!-- symbol方式引用彩色图标，就得这么写 --> <!-- :clas
iconfont 多色图标使用介绍
iamlujingtao的博客
10-11 5471
iconfont 多色图标使用介绍前言一、多色文字图标特点二、多色文字图标使用方式三、修改颜色结语 前言 阿里巴巴矢量图标库 http://iconfont.cn 已经推出多色图标很久了，那么究竟如何使用呢？ 一开始我以为和普通文字图标无区别，但实际使用的时候发现并不是。 多色文字图标其实是用svg做的，需要引用js才能正确使用，优缺点也比较明显，但是这种方式是符合未来发展方向的，值得推荐使用的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值