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

图标管理与Vue项目集成指南
最新推荐文章于 2024-10-23 13:34:01 发布
原创 最新推荐文章于 2024-10-23 13:34:01 发布 · 779 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #html5 #javascript

本文档详细介绍了如何在项目中添加并管理图标资源，包括在资源管理平台创建项目、添加图标、修改名称及下载图标。接着，阐述了在Vue项目中使用图标的具体步骤，如将图标文件放入assets目录，导入iconfont.css到main.js，以及在vue组件中引入图标。此教程旨在帮助开发者高效地整合和使用图标资源。

一、添加项目需要的图标

  1. 点击资源管理–>我的项目在这里插入图片描述
  2. 创建项目
    在这里插入图片描述
    3、添加到项目在这里插入图片描述
    此时上方购物车有个小红点，点击添加到对应的项目
    在这里插入图片描述在这里插入图片描述
    4、修改图标名称
    在这里插入图片描述
    5、下载至本地
    在这里插入图片描述
    二、在vue项目中使用
    在这里插入图片描述
    将下载的压缩文件解压，并放在项目中（我这边是在assets中放入iconfont文件中）
  • 在main.js中引入
import "./assets/iconfont/iconfont.css";
  • 对应的vue文件中引入
    在这里插入图片描述
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 2286
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
如何在Vue项目中使用阿里巴巴矢量图标库
最新发布
m0_63026408的博客
05-06 1433
首先我们需要找到阿里巴巴矢量库官网。
Vue 引入阿里矢量图 （ 在原有项目的图标库中加入新的图标）
wanyu729的博客
05-31 541
3.下载代码到桌面并解压可以修改一下名字 我修改的名字font。4.把解压的代码直接粘贴复制到项目里的。5.在main.js全局引入。6.在使用的页面复制css。2.点击右上角购物车。
vue引入阿里图标库
aiteshanshan的博客
11-16 886
1.下载阿里图标 2. 3.在main.js里引入 import '@/assets/icons/iconfont.css' 4.在vue页面使用 <i class="iconfont icon-Abnormalarea"></i>
vue项目引入阿里图标库
zxl_start的博客
09-10 221
https://www.jianshu.com/p/b6e88141a698
vue引入阿里巴巴矢量图标
糖长老莫小贝的博客
02-12 871
阿里巴巴矢量图标库相较于其他库的icon图标要丰富不少，目前有418w+ icon，可以说是前端工作人员的首选，博主也在这里安利一下。 网址：点击直达 有时候我们写vue的时候经常要引入icon图标，下面我就简单介绍一下vue 如何引入阿里图标。 注册一个账号是必不可少的O(∩_∩)O哈哈~，这里就不介绍了。 去阿里图标矢量图标库将想要的图标添加入库。 再去库中将图标添加到项目。 ...
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
antdesignvue2 引入阿里巴巴矢量图标库、
03-19
Ant Design Vue 提供了一种动态加载图标的机制，这使得我们可以轻松地引入阿里巴巴矢量图标库中的自定义图标。以下是具体方法： 1. **全局注册所有图标** 如果项目中会频繁使用多个图标，则可以选择一次性导入所有...
uniapp引入阿里巴巴矢量图标库
qq_60976312的博客
02-24 2215
uniapp引入阿里巴巴矢量图标库
【前端】vuecli项目引入ant-design-vue并用ant-design-vue配置阿里巴巴矢量图标库
tangxz的博客
12-07 1190
1、导入并配置ant-design-vue 官网说的十分清楚，我直接copy官网的操作 npm i --save ant-design-vue 在main.js中完整引入 ant-design-vue import Vue from 'vue'; import Antd from 'ant-design-vue'; import App from './App'; import 'ant-design-vue/dist/antd.css'; Vue.config.productionTip = false
vue项目引入阿里云图标库
weixin_61001537的博客
10-23 290
3.可以上传ui绘制的图标到该项目文件夹，也可以在阿里云图标库中加入购物车统一放到该项目文件夹。fontclass的点缀代表着下载的每个图片名称的的前缀。目的是统一图标的名称。5.项目新建一个文件夹存放这些文件(可以全部引入这些文件，也可只引红框的文件)1.创建账号，个人或者公共账户都可以，以下是登录进来的页面。3.2 在阿里云图标库选择icon加入项目文件夹。3.1上传ui绘制好的图标或其他图标。4.下载所有图标引入到项目当中。6.挂载入口文件main.js。
vue引入阿里图标
weixin_55608554的博客
05-06 197
网址
Vue项目引入阿里彩色图标库
DWForYou_DJF
02-08 659
在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 2217
vue 引入 icon(阿里图标库)
将矢量图标库导入vue中使用
weixin_45270158的博客
07-16 308
首先创建个项目 添加到购物车 添加到项目，还没有创建就建一个 创建项目,有了就下一步 点击查看项目设置 看看都打钩没有 好了就下载 只要选中的文件就行 在项目中创建iconfont文件夹把刚刚的文件丢进去 然后在iconfont.css的代码替换成下面的代码, 最后再main.js中导入，根据你的路径来 import "./assets/iconfont/iconfont.css" @font-face {font-family: "iconfont"; src: url('iconfont.eo
在Vue项目中使用阿里巴巴矢量图
qq_42191033的博客
09-05 823
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 531
例如：如何正确使用阿里巴巴矢量图标，跟着以下步骤实现吧！提示：以下是本篇文章正文内容，下面案例可供参考提示：有疑问欢迎评论留言！
vue使用阿里巴巴矢量图
qq_23159841的博客
07-30 1186
1、购物车添加自己需要的矢量图(https://www.iconfont.cn/)下载需要的包。 2、将iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff、iconfont.woff2复制到public\static\iconfont文件夹下。 3、修改iconfont.css里面的路径 @font-face { font-family: 'iconfont'; src: url('./iconfont.eot'
vue引入阿里云图标
weixin_52102740的博客
09-26 660
PS:字体图标，不可以通过宽高来调节大小，可以通过文字样式调节，需要写到通过类名iconfont设置，否则CSS权重不够，调节不了样式。6.新建文件夹，存放解压出来的所有文件。2.选择项目所需的图标到购物车。7.在main.js中导入样式。4.到我的项目，下载到本地。1.进入阿里云图标官网。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值