如何从阿里巴巴矢量图标库引入图标

最新推荐文章于 2025-05-03 13:30:00 发布
最新推荐文章于 2025-05-03 13:30:00 发布
阅读量1.8k 收藏 11
点赞数 5
文章标签： vscode 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shirley__csdn/article/details/126465509
版权

1、进入链接图标库
2、下载可能需要登录账号，如无账号可用手机号注册登录
3、在首页搜索自己需要的图标，（此处以“花”为例）
在这里插入图片描述
4、找到需要的图标，添加入购物车内
添加入库
5、打开右上角购物车，找“花”，点击“下载代码”，“确定”
找到小车

下载

在这里插入图片描述
6、打开下载压缩包，解压
下载包

在这里插入图片描述
7、打开vscode,找到需要引入图标的页面，此处给一个span（仅以span为例），类名取为：“iconfont”
span
8、找到解压后的iconfont.css文件，并引入到html中
css

![css](https://img-blog.csdnimg.cn/a0ab96e741de4c4e9c0e75ffd54c2a54.png#pic_center在这里插入图片描述

9、打开解压后的demo.html文件，点击Font class 找到下载图标的原类名
demo

在这里插入图片描述
10、把原类名写入span。
类
11、Ctrl+s,Alt+b
在这里插入图片描述

12、图标大小可通过fontsize调节
大小在这里插入图片描述

Shirley__csdn
关注
阿里矢量图标如何引用详解
weixin_69474694的博客
07-17 966
阿里矢量图标
如何将阿里巴巴矢量图标库iconfont引入到vue项目中？
日常分享工作中的一些技术干货。
12-25 1096
当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。
iconfont阿里巴巴矢量图标引入方法
spring_007_999的博客
12-15 693
iconfont自定义图标引入项目
零基础入门：在VSCode中正确引入阿里巴巴矢量图标库的完整流程
最新发布
2401_83607690的博客
05-03 1381
在浏览器中我们经常会看到一些图标比如🔍，本文将讲解如何获取这些图标元素，如何正确的将其导入VSCode以及如何设置这些元素的属性
总结：引入Iconfont-阿里巴巴矢量图标库的三种方式，小白必看，看了就会~
止水Itachi
06-11 9776
1、首先，百度搜索“阿里矢量库”，点进去，然后注册一个账号登录进入。 2、比如你想要的一个购物车图片，搜索框里输入“购物车”，点击搜索。 3、选择加入你想要的购物车图标，点击框住的购物车图标，不要点线面的下载图标哦 4、此时在你的右上角购物车中已加入进去，当然，你可以选择同时加入多个图标进入你的购物车，在这里我加入了两种图标。 5、点开你的右上角购物车，选择“添加至项目”。 6、点击新建文件夹 7、随意命名，在这里我命名为“举例子”，然后确定。 8、未完待续，明天更新。。。 ...
阿里巴巴矢量图标导入项目具体方法
weixin_45236498的博客
03-17 2329
1、百度搜索阿里巴巴矢量图标 2、点击图标管理 3、选择喜欢的图标并加入购物车 4、点击下载代码 5、解压文件 6、复制全部到你项目的fonts项目下 6、在你的jsp写入引入 注意路径哦！ 7，运行这个文件就有案例哦 8、然后将代码添加到你的项目即可 9、运行结果 ...
如何在项目中使用阿里巴巴矢量图标库
hsyldw2000的博客
01-03 1524
font-class：是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。与unicode使用方式相比的特点是兼容性良好，支持ie8+及现代浏览器；使用class来定义图标，所以替换图标时，只需要修改class里的unicode引用即可。与上面两种相比的特点：支持多色图标，不受单色限制；特点是兼容性最好，支持按字体的样式去动态调整图标。5.点击创建项目，输入项目名称点击确定，选择项目名称，点击跳转到我的项目页面。2.搜索您所需要的图标，选择您所需要的样式，点击购物车。
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
uniapp引入阿里巴巴矢量图标库
Gzyhjf9的博客
05-18 1738
uni-app中使用阿里巴巴矢量图标库 1、打开网址，链接： 阿里巴巴矢量图标库 2、注册账号并登录，已有账号直接登录 3、选择图标，点击添加入库 4、点击购物车图标，查看添加入库的图标 5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。 6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。 注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。 7、下载代码至本地 8、找到下载的压缩包，解压缩后复制 iconfo
vue 引入 阿里巴巴矢量图标库iconfont
pamerely的博客
08-31 1620
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法 前言 开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。 选择字体图标 打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/ 在官网里面选择自己想要的字体图标 把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。 把购物车里的字体图标加入项目中 选择好字体图标后，把购物车里的字体图标加入项目中。
阿里矢量图标库WPF使用Demo
12-27
阿里矢量图标库是一个由阿里巴巴旗下公司维护的在线矢量图标管理系统。它的核心是提供一个庞大的图标资源集合，供用户下载使用。这些图标不仅多样，而且质量高，且大多数是开源的。这意味着个人和公司都可以自由地将...
阿里矢量图引入方法
海贼王路飞 同学
01-15 2197
** 阿里矢量图引入方法 ** font-class引用方式引用： 引入下载文件中的css文件与js文件 在你的文件里面引入这个地址 然后再内容标签里写入  本人一直在用这种方法，推荐使用 与unicode使用方式相比，具有如下特点： 兼容性良好，支持ie8+，及所有现代浏览器。 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标，所以当...
如何在代码里添加并使用阿里巴巴矢量图标-iconfont，在此常用有三种引入方法
lan_shen的博客
01-02 3142
iconfont-阿里巴巴矢量图库 在登录好账号的前提下进行以下操作： 添加icon： 首先搜索你想要的icon名，比如：首页 选好你想要的图——加入购物车——添加至项目（没有项目的话可以新建项目，如果需要很多icon，建议一次挑选好再全部添加至项目，便于下载和引用）——点击下载到本地——解压下好的zip文件 把解压后的文件夹放到项目里并引入 第一种引入方法： 打开icon文件夹里的css文件 打开后在文件里面找到对应的icon名称 在 <i> </i> 标签里面添加cl
uniapp-阿里巴巴矢量图标使用（字体图标引用）
m0_62626838的博客
07-18 689
3.解压下载好的压缩包，将里面的文件全部放到static中font文件夹中（自己新建），并打开demo_index.html文件，复制其中的字体声明代码至自己的页面的css中。6、打开font文件夹里的demo_index.html，选择Unicode中复制图标的代码,用到页面中。4、修改复制过来的字体声明中的路径。（即下图的src路径需替换为font中的.tff文件）5、在页面的元素样式中需引入font-family: 'iconfont';网站，将想引入的图标加入购物车。
vue项目引入阿里图标后如何新增图标至项目中
xiao_qiang666的博客
10-17 315
3、复制代码，替换至项目中的iconfont.css。1、在阿里官网找到合适的图标添加至项目。4、在如下三个文件中添加新增的图标。2、将文件下载至本地。
阿里矢量图库 iconfont 引入项目使用方法
my_batis的博客
04-27 3570
1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录 2.搜索自己想要的所有图标，添加入库； 3.新建项目，添加所有图标至项目中； 3.1.打开自己的购物车 3.2.新建项目 不要直接下载代码，或缺少所需文件 4.创建完成自动跳转至项目页面，下载至本地即可，解压后将所有文件放入项目的同一文件夹中； 解压之后的文件 放入项目同一文件目录下 5.项目中引入即可 #引入css样式 <link rel="stylesheet" type="
uniapp添加阿里字体图标库图标
beConcentration的博客
01-05 735
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode->查看在线链接的@font-face并替换iconfont.css的@font-face，并在每个链接前添加https: 3.本地图标方式 iconfont.css中用下方代码替换@font-face @font-face { font-family: 'iconfont'; src: url('@/styl
阿里图标库在旧有的iconfont中添加新的图标
weixin_52063946的博客
09-09 5879
阿里图标库在旧有的iconfont中添加新的图标
在vscode中使用iconfont阿里字体图标
qq_47548037的博客
05-07 2801
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/ 首页： 2.从中选择你喜欢的图标库 3. 点击加入购物车，在购物车中可以查看自己想要的图标 4.下一步点击添加至项目，给你想要的图标加入项目并取一个喜欢的项目名字 5.直接点击下载至本地，下载完成后解压缩...
uniapp阿里巴巴矢量图标库多色引入
03-08
### 在 UniApp 中引入并使用阿里巴巴矢量图标库实现多色图标 #### 下载与安装 为了在 UniApp 项目中成功集成阿里巴巴矢量图标库，需先访问官方网站 https://www.iconfont.cn/ 并创建所需图标的在线项目。完成后下载代码包至本地环境，并通过命令行工具执行必要的依赖项安装操作 `npm install -g iconfont-tools` 或者采用 cnpm 的方式来加速国内网络下的安装过程[^4]。 #### 文件处理 解压缩所获得的文件后，会发现其中包含了用于配置样式的 CSS 文件——`iconfont-weapp-icon.css`。此文件对于定义图标外观至关重要，应将其放置于项目的静态资源目录 (`static`) 内以便后续引用[^5]。 #### 样式表引入 为了让整个应用程序能够识别这些自定义样式，可以在全局样式文件 (通常是 `App.vue`) 中导入上述提到的 CSS 文件： ```css <style> /* 彩色的图标 */ @import url("~@/static/icon/iconfont-weapp-icon.css"); </style> ``` 这段代码确保了所有页面都能继承该样式设定，从而支持多色图标的渲染。 #### 图标调用 当一切准备就绪之后，在 HTML 结构里可以通过特定类名的方式嵌入所需的图标元素。例如 `<text class="t-icon iconchajiaoyi"></text>` ，这里 `t-icon` 是公共样式而 `iconchajiaoyi` 则代表具体的某个图标实例[^3]。 值得注意的是，默认情况下即使选择了多色版本的图标也可能会呈现单色调的情况。这通常是因为浏览器缓存或是未正确加载最新的样式文件所致。此时建议清理缓存重新尝试，亦可检查是否有其他覆盖性的CSS规则影响到了最终显示效果[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值