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

最新推荐文章于 2024-10-17 10:46:42 发布
原创 最新推荐文章于 2024-10-17 10:46:42 发布 · 1.8k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #前端 #javascript

本文详细指导如何从链接库下载并添加图标，通过VSCode引入iconfont实现个性化设计，包括注册、搜索、购物车操作和代码引用步骤。

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
关注
如何在Vue项目中使用阿里巴巴矢量图标库
m0_63026408的博客
05-06 1410
首先我们需要找到阿里巴巴矢量库官网。
阿里巴巴矢量图标库使用
weixin_68658847的博客
07-03 1671
阿里巴巴矢量图标库使用
iconfont阿里巴巴矢量图标引入方法
spring_007_999的博客
12-15 728
iconfont自定义图标引入项目
阿里矢量图标如何引用详解
weixin_69474694的博客
07-17 1014
阿里矢量图标
总结：引入Iconfont-阿里巴巴矢量图标库的三种方式，小白必看，看了就会~
热门推荐
止水Itachi
06-11 1万+
1、首先，百度搜索“阿里矢量库”，点进去，然后注册一个账号登录进入。 2、比如你想要的一个购物车图片，搜索框里输入“购物车”，点击搜索。 3、选择加入你想要的购物车图标，点击框住的购物车图标，不要点线面的下载图标哦 4、此时在你的右上角购物车中已加入进去，当然，你可以选择同时加入多个图标进入你的购物车，在这里我加入了两种图标。 5、点开你的右上角购物车，选择“添加至项目”。 6、点击新建文件夹 7、随意命名，在这里我命名为“举例子”，然后确定。 8、未完待续，明天更新。。。 ...
阿里巴巴矢量图标导入项目具体方法
weixin_45236498的博客
03-17 2520
1、百度搜索阿里巴巴矢量图标 2、点击图标管理 3、选择喜欢的图标并加入购物车 4、点击下载代码 5、解压文件 6、复制全部到你项目的fonts项目下 6、在你的jsp写入引入 注意路径哦！ 7，运行这个文件就有案例哦 8、然后将代码添加到你的项目即可 9、运行结果 ...
如何在项目中使用阿里巴巴矢量图标库
hsyldw2000的博客
01-03 2082
font-class：是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。与unicode使用方式相比的特点是兼容性良好，支持ie8+及现代浏览器；使用class来定义图标，所以替换图标时，只需要修改class里的unicode引用即可。与上面两种相比的特点：支持多色图标，不受单色限制；特点是兼容性最好，支持按字体的样式去动态调整图标。5.点击创建项目，输入项目名称点击确定，选择项目名称，点击跳转到我的项目页面。2.搜索您所需要的图标，选择您所需要的样式，点击购物车。
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
阿里矢量图标库WPF使用Demo
12-27
阿里矢量图标库是一个由阿里巴巴旗下公司维护的在线矢量图标管理系统。它的核心是提供一个庞大的图标资源集合，供用户下载使用。这些图标不仅多样，而且质量高，且大多数是开源的。这意味着个人和公司都可以自由地将...
阿里巴巴矢量图标库Symbol方式引入
fantasyfzg的博客
12-30 706
icon
阿里矢量图引入方法
海贼王路飞 同学
01-15 2224
** 阿里矢量图引入方法 ** font-class引用方式引用： 引入下载文件中的css文件与js文件 在你的文件里面引入这个地址 然后再内容标签里写入  本人一直在用这种方法，推荐使用 与unicode使用方式相比，具有如下特点： 兼容性良好，支持ie8+，及所有现代浏览器。 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标，所以当...
如何在代码里添加并使用阿里巴巴矢量图标-iconfont，在此常用有三种引入方法
lan_shen的博客
01-02 3286
iconfont-阿里巴巴矢量图库 在登录好账号的前提下进行以下操作： 添加icon： 首先搜索你想要的icon名，比如：首页 选好你想要的图——加入购物车——添加至项目（没有项目的话可以新建项目，如果需要很多icon，建议一次挑选好再全部添加至项目，便于下载和引用）——点击下载到本地——解压下好的zip文件 把解压后的文件夹放到项目里并引入 第一种引入方法： 打开icon文件夹里的css文件 打开后在文件里面找到对应的icon名称 在 <i> </i> 标签里面添加cl
uniapp-阿里巴巴矢量图标使用（字体图标引用）
m0_62626838的博客
07-18 821
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 368
3、复制代码，替换至项目中的iconfont.css。1、在阿里官网找到合适的图标添加至项目。4、在如下三个文件中添加新增的图标。2、将文件下载至本地。
阿里矢量图库 iconfont 引入项目使用方法
my_batis的博客
04-27 3718
1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录 2.搜索自己想要的所有图标，添加入库； 3.新建项目，添加所有图标至项目中； 3.1.打开自己的购物车 3.2.新建项目 不要直接下载代码，或缺少所需文件 4.创建完成自动跳转至项目页面，下载至本地即可，解压后将所有文件放入项目的同一文件夹中； 解压之后的文件 放入项目同一文件目录下 5.项目中引入即可 #引入css样式 <link rel="stylesheet" type="
uniapp添加阿里字体图标库图标
beConcentration的博客
01-05 779
字体图标添加 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 6024
阿里图标库在旧有的iconfont中添加新的图标
在vscode中使用iconfont阿里字体图标
qq_47548037的博客
05-07 2996
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/ 首页： 2.从中选择你喜欢的图标库 3. 点击加入购物车，在购物车中可以查看自己想要的图标 4.下一步点击添加至项目，给你想要的图标加入项目并取一个喜欢的项目名字 5.直接点击下载至本地，下载完成后解压缩...
自己摸索阿里矢量图标iconfont的用法 之 阿里图标怎么用（最简单）（多图预警）
tuzi007a的博客
04-19 2303
话不多说，直接先上干货。 第一部分：阿里图标iconfont怎么用。 1，登录阿里图标官网 https://www.iconfont.cn/ 2，登录。 没号可以先注册。用微博或者GitHub登录的。 3，红框里搜索需要的图标。输入汉字，拼音，英文都可以。 4，显示出所有相关图标。 5，想要哪个图标。就把鼠标放在那个图标上。 6，点一下购物车，添加入库。然后右上角就会显示已经选择图标的数量。 ...
uniapp阿里巴巴矢量图标库多色引入
最新发布
03-08
### 在 UniApp 中引入并使用阿里巴巴矢量图标库实现多色图标 #### 下载与安装 为了在 UniApp 项目中成功集成阿里巴巴矢量图标库，需先访问官方网站 https://www.iconfont.cn/ 并创建所需图标的在线项目。完成后下载...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值