​如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标（svg图标）

最新推荐文章于 2022-08-17 20:30:44 发布
最新推荐文章于 2022-08-17 20:30:44 发布
阅读量2.4k 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue iconfont svg 彩色图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bing103425/article/details/81195803
版权
本文详细介绍了如何在Vue项目中使用阿里巴巴Iconfont的彩色SVG图标，包括在线引入和本地引入的步骤，以及如何更新图标代码。通过新建项目目录、生成代码、引入HTML和配置全局样式，可以方便地在应用中展示和管理彩色图标。
摘要由CSDN通过智能技术生成

1.打开iconfont，并登录账号

http://www.iconfont.cn/

 

 

2.挑选自己喜欢的图标，加入购物车

 

 

 

3.打开购物车 => 添加至项目 => 新建项目目录 => 确定

 

 

 

 

4.进入我的项目，点击Symbol，点击生成代码

 

 

 

5.将生成的代码引

最低0.47元/天 解锁文章
前端复制粘贴工程师
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue如何使用iconfont（svg图标）
TUTsmile的博客
02-13 3297
文章目录1. 下载图标3.代码 使用方式（js文件） 此处说明一下，若想要知道svg的进阶用法，可参考这篇文章HTML5如何使用svg 1. 下载图标 点击链接 阿里巴巴的iconfont矢量图标库 进入阿里官网点击图标库 从图标库中，选中你想要的图标加入购物车 点击右上角的购物车， 根据个人使用需求，点击下载素材 或下载代码，,这两种方法对应的使用方法不同，后面会分为两个模块讲解 #...
vue引入阿里巴巴图标(含彩色图标)
qcg14774125的博客
06-03 3508
第一步：下载阿里巴巴图标库的资源到本地。 第二步：在自己的assets创建一个icon文件，然后把下载的东西选择放进去。 第三步：在main.js引入 import './assets/icon/iconfont.js' //引入阿里巴巴图标库js import './assets/icon/iconfont.css'//引入阿里巴巴图标库css 第四步：在App.vue的css...
CSS---（字体图标，插画，背景图）阿里Iconfont在线图标使用
lzzw的学习之路
08-04 714
一、搜索自己想要的图标 进入官网：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 在搜索栏中寻找自己想要的图标，例如：金币； 你可以将其下载为png文件等在CSS代码中引用，但这里我要讲的是在线引用。 二、添加至项目 将该图标加入到购物车（点击第一个，购物车） 添加至项目 生成代码（该代码是在线的，因为我这里之前有图标，所以是更新代码） 值得注意的是没错有添加或者删除图标的操作都要..
vue项目中使用iconfont图标及使用彩色图标
-
02-13 2851
单色图标的使用 1、首先将选择好的图标下载到本地 2、将iconfont.css文件以及后缀为 .eot .ttf .woff .svg的文件加入到项目文件夹中 3、在项目的main.js文件中引入iconfont.css样式文件， import "./assets/styles/iconfont.css" 4、注意在iconfont.css文件中根据自身情况修改引用的其他四个文件的路径，否则报错 5、接下来就是在项目中使用啦，单色图标直接使用图标对应的uniCode编码，以及给标签加ico
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名..
uniapp项目引入阿里彩色iconfont图标（带图超详细解说篇）的教程
weixin_45721912的博客
05-28 2511
1. 把选择的图标加入购物车 2.解压下载好的图标包，进入解压的文件夹 3. 在解压好的文件夹内打开终端 4. 在打开的终端内输入代码 输入命令行：npm install -g iconfont-tools 命令结束后，运行：iconfont-tools 出现如下图所示的内容，按图示输入文件名即可（或者一直回车） 4.输入命令后会出现一个新的文件夹 1、以上命令运行结束后，会在目录中生成 iconfont-weapp 文件夹： 5. 引入图标文件 1、打开uniapp，把处理好的
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，这些图标可以很方便地集成到我们的 Vue 项目...
如何在项目中使用阿里巴巴矢量图标
最新发布
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
通过上述流程，可以顺利在Vue项目中集成ElementUI和iconfont图标库，使得开发者可以在项目中灵活使用大量美观且功能丰富的图标资源。这对于提高界面的视觉效果和用户体验非常有帮助。对于任何想要提升前端页面美观性...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
vue中引用阿里字体图标的方法
08-28
引用阿里字体图标在 Vue 项目中是一件非常简单的事情，只需要正确地配置 Webpack 和引入阿里字体图标的 CSS 文件就可以了。如果您在使用阿里字体图标时遇到了错误问题，不要担心，只需要按照我们的步骤来解决问题就...
vue引入阿里彩色矢量图标
池海
12-30 1304
1.将喜欢的图标添加到库中后加入项目，使用Symbol的方式下载到本地 2.下载后将文件解压加入到你的项目中： 3.在main文件中引入入iconfont.css和iconfont.js文件 4.打开iconfont.css文件，将以下代码加进去 [class^="el-icon-ch"], [class*=" el-icon-ch"]/*这里有空格，名字随意*/* { font-fam...
vue引用阿里彩色图标（symbol引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 5234
引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...
在VUE项目中使用iconfont彩色图标
轻风细雨_林木木
06-10 2905
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"
阿里矢量图标库彩色图标（Symbol 引用）
weixin_52141612的博客
08-17 591
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇。-- 第一部分引入css 和 js文件 -->-- 第三部分挑选并获取类名，应用于页面 -->/* 第二部分加入css代码设置icon类 */...
vue项目引入彩色iconfont图标
yummy_yuyu的博客
03-29 2387
做项目的时候经常会使用到iconfont图标库，在项目开始的时候提前想好需要什么图标，最好是多下载几个可替换的同类型图标，宁滥勿缺（别问，问就是得到了教训），无色的还是彩色的，这点很重要。 首先了解一下如何在项目中使用iconfont图标 进入官网iconfont图标库搜索想要的图标 添加到项目中，点确定，没有项目就在旁边的加号新建 选择Font class,点击下载至本地，选择自己要放置在项目中的位置 解压压缩包到当前文件夹，得到以下文件，我只保存了这几个重要的 项目...
（iconfont问题解决）Vue引入彩色iconfont
Wu_JingYi0829的博客
08-15 1038
Vue引入彩色iconfont的步骤： 在iconfont官网上选好自己喜欢的图标加入购物车，添加到项目。 将压缩包下载至本地，引入下图几个文件。 一般的图标引入方式如图所示： 引入有颜色的图标时，图标的颜色会是设定的默认颜色；此时需要如此引入： 第一种是单个图标的引入 <span class="item-title-icon"> <svg class="icon" aria-hidden="true" > <use xlink:
Cordova项目使用Android Studio真机调试
热门推荐
bing103425的博客
08-02 1万+
初始化Vue-Cordova项目请看https://blog.csdn.net/bing103425/article/details/81169784   项目写完，不想每次改一句代码就打包APK导入手机安装查看效果，这时就需要用Android  Studio真机调试了。   Duang~~   1.打开Android  Studio，打开Cordova项目，选择目录下的Platfor...
vue项目中怎么引用阿里巴巴图标库
05-25
在 Vue 项目中引用阿里巴巴图标库，可以通过以下步骤来实现： 1. 安装 @ant-design/icons-vue 包 ``` npm install @ant-design/icons-vue --save ``` 2. 在 Vue 项目中使用 - 全局使用 在 main.js 中引入 @ant-design/icons-vue 包，并将其注册为全局组件： ``` import { createFromIconfontCN } from '@ant-design/icons-vue' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js' }) Vue.component('IconFont', IconFont) ``` 其中，`scriptUrl` 参数是需要替换成您自己的图标库链接。 然后，在组件中可以直接使用 `<IconFont type="icon-xxx" />` 的方式引入图标。 - 局部使用 在需要使用图标的组件中，直接引入 `@ant-design/icons-vue` 包，并创建一个 `IconFont` 对象： ``` import { createFromIconfontCN } from '@ant-design/icons-vue' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js' }) ``` 然后，在组件中可以直接使用 `<IconFont type="icon-xxx" />` 的方式引入图标。 以上就是在 Vue 项目中引用阿里巴巴图标库的方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值