Vue 引入阿里巴巴矢量图标库 (详细)

最新推荐文章于 2025-05-06 17:50:19 发布
最新推荐文章于 2025-05-06 17:50:19 发布
阅读量757 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Man_12345/article/details/120737471
本文档详细介绍了如何在项目中添加并管理图标资源，包括在资源管理平台创建项目、添加图标、修改名称及下载图标。接着，阐述了在Vue项目中使用图标的具体步骤，如将图标文件放入assets目录，导入iconfont.css到main.js，以及在vue组件中引入图标。此教程旨在帮助开发者高效地整合和使用图标资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、添加项目需要的图标

  1. 点击资源管理–>我的项目在这里插入图片描述
  2. 创建项目
    在这里插入图片描述
    3、添加到项目在这里插入图片描述
    此时上方购物车有个小红点，点击添加到对应的项目
    在这里插入图片描述在这里插入图片描述
    4、修改图标名称
    在这里插入图片描述
    5、下载至本地
    在这里插入图片描述
    二、在vue项目中使用
    在这里插入图片描述
    将下载的压缩文件解压，并放在项目中（我这边是在assets中放入iconfont文件中）
  • 在main.js中引入
import "./assets/iconfont/iconfont.css";
  • 对应的vue文件中引入
    在这里插入图片描述
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 2167
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
vue 引入 阿里巴巴矢量图标库iconfont
pamerely的博客
08-31 1626
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法 前言 开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。 选择字体图标 打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/ 在官网里面选择自己想要的字体图标 把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。 把购物车里的字体图标加入项目中 选择好字体图标后，把购物车里的字体图标加入项目中。
Vue 引入阿里矢量图 （ 在原有项目的图标库中加入新的图标）
wanyu729的博客
05-31 479
3.下载代码到桌面并解压可以修改一下名字 我修改的名字font。4.把解压的代码直接粘贴复制到项目里的。5.在main.js全局引入。6.在使用的页面复制css。2.点击右上角购物车。
如何在Vue项目中使用阿里巴巴矢量图标库
最新发布
m0_63026408的博客
05-06 1040
首先我们需要找到阿里巴巴矢量库官网。
vue引入阿里图标库
aiteshanshan的博客
11-16 858
1.下载阿里图标 2. 3.在main.js里引入 import '@/assets/icons/iconfont.css' 4.在vue页面使用 <i class="iconfont icon-Abnormalarea"></i>
vue项目引入阿里图标库
zxl_start的博客
09-10 204
https://www.jianshu.com/p/b6e88141a698
vue引入阿里巴巴矢量图标
糖长老莫小贝的博客
02-12 853
阿里巴巴矢量图标库相较于其他库的icon图标要丰富不少，目前有418w+ icon，可以说是前端工作人员的首选，博主也在这里安利一下。 网址：点击直达 有时候我们写vue的时候经常要引入icon图标，下面我就简单介绍一下vue 如何引入阿里图标。 注册一个账号是必不可少的O(∩_∩)O哈哈~，这里就不介绍了。 去阿里图标矢量图标库将想要的图标添加入库。 再去库中将图标添加到项目。 ...
如何将阿里巴巴矢量图标库iconfont引入到vue项目中？
日常分享工作中的一些技术干货。
12-25 1156
当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
antdesignvue2 引入阿里巴巴矢量图标库、
03-19
Ant Design Vue 提供了一种动态加载图标的机制，这使得我们可以轻松地引入阿里巴巴矢量图标库中的自定义图标。以下是具体方法： 1. **全局注册所有图标** 如果项目中会频繁使用多个图标，则可以选择一次性导入所有...
uniapp引入阿里巴巴矢量图标库
Gzyhjf9的博客
05-18 1756
uni-app中使用阿里巴巴矢量图标库 1、打开网址，链接： 阿里巴巴矢量图标库 2、注册账号并登录，已有账号直接登录 3、选择图标，点击添加入库 4、点击购物车图标，查看添加入库的图标 5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。 6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。 注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。 7、下载代码至本地 8、找到下载的压缩包，解压缩后复制 iconfo
阿里矢量图标库
04-26
阿里矢量图标库
vue项目引入阿里云图标库
weixin_61001537的博客
10-23 228
3.可以上传ui绘制的图标到该项目文件夹，也可以在阿里云图标库中加入购物车统一放到该项目文件夹。fontclass的点缀代表着下载的每个图片名称的的前缀。目的是统一图标的名称。5.项目新建一个文件夹存放这些文件(可以全部引入这些文件，也可只引红框的文件)1.创建账号，个人或者公共账户都可以，以下是登录进来的页面。3.2 在阿里云图标库选择icon加入项目文件夹。3.1上传ui绘制好的图标或其他图标。4.下载所有图标引入到项目当中。6.挂载入口文件main.js。
vue引入阿里图标
weixin_55608554的博客
05-06 179
网址
Vue项目引入阿里彩色图标库
DWForYou_DJF
02-08 644
在iconfont官网选图标，加入购物车，加入项目，注意选择Font class，再下载到本地 在项目src目录新建font目录,只拷贝刚才下载解压的iconfont.js文件 在main.js导入iconfont.js文件 全局样式文件中写入svg图标通用样式 .al_icon { width: 14px; height: 14px; overflow: hidden; vertical-align: -2px; fill: currentColor; .
vue 引入 icon(阿里图标库)
qq_28586135的博客
11-10 2176
vue 引入 icon(阿里图标库)
将矢量图标库导入vue中使用
weixin_45270158的博客
07-16 294
首先创建个项目 添加到购物车 添加到项目，还没有创建就建一个 创建项目,有了就下一步 点击查看项目设置 看看都打钩没有 好了就下载 只要选中的文件就行 在项目中创建iconfont文件夹把刚刚的文件丢进去 然后在iconfont.css的代码替换成下面的代码, 最后再main.js中导入，根据你的路径来 import "./assets/iconfont/iconfont.css" @font-face {font-family: "iconfont"; src: url('iconfont.eo
在Vue项目中使用阿里巴巴矢量图
qq_42191033的博客
09-05 804
1、选择图标添加到购物车 2、创建项目 3、添加到项目中 4、下载到本地 5、copy文件到vue中， 6、main.js中引入iconfont.css 7、使用 <i class="iconfont icon-wenzhang">11</i> 8、如果发现显示不出来，请检查你的iconfont.css文件，是否和他匹配 ...
【VUE】vue项目引用阿里巴巴矢量图标；
L4937的博客
05-27 503
例如：如何正确使用阿里巴巴矢量图标，跟着以下步骤实现吧！提示：以下是本篇文章正文内容，下面案例可供参考提示：有疑问欢迎评论留言！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值