阿里矢量图库 iconfont 引入项目使用方法

最新推荐文章于 2025-10-20 15:30:27 发布

原创最新推荐文章于 2025-10-20 15:30:27 发布 · 3.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html

iconfont 专栏收录该内容

1 篇文章

订阅专栏

本文档详细介绍了如何在阿里巴巴矢量图标库中搜索、添加、下载及引入图标到项目中，包括新建项目、下载图标文件并将其放置在项目目录下，以及在项目中引用图标所需的CSS和HTML代码。此外，还提到了如何修改和获取图标名称。

1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录

在这里插入图片描述

2.搜索自己想要的所有图标，添加入库；

在这里插入图片描述

3.新建项目，添加所有图标至项目中；

3.1.打开自己的购物车

在这里插入图片描述

3.2.新建项目

在这里插入图片描述
不要直接下载代码，或缺少所需文件

4.创建完成自动跳转至项目页面，下载至本地即可，解压后将所有文件放入项目的同一文件夹中；

在这里插入图片描述
解压之后的文件放入项目同一文件目录下

5.项目中引入即可

#引入css样式
<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
#使用图标代码
 <i class=" iconfont icon-guanliyuan"></i>

6.图标名字的修改和获取

在这里插入图片描述

Symbol 中编辑名称复制代码即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Heart&Fire

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

iconfont使用方法

不会唱杰伦

09-30

780

一、iconfont 他来了，他来了，他带着阿里妈妈iconfont字体图标库的使用方法向我们走来了！首先看一下什么是iconfont： Iconfont：阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。敲黑板！敲黑板！敲黑板！童鞋们手里的iphone都放一放，认真听课了，重点来了。 1.1、使用方法第一步：登录还是熟悉的套路，又是熟悉的场景，登录账号！细心

微信小程序+iconfont，在项目里引入iconfont

花椒和蕊的博客

03-08

277

首先登录iconfont-阿里巴巴矢量图标库，点击链接打开字体库 1、搜索自己要的图标 2、加入购物车 3、点击购物车，添加至项目，选择Font class，通过类的方式来使用这些图标。点击查看在线链接，生成代码，点击代码在浏览器新窗口中打开新建与pages平级的styles文件夹，内部新建iconfont.wxss，将代码全部复制到wxss里，在全局样式文件里引入iconfont.wxss 在任意页面的wxss中，添加类名 iconfont 及对应的类目完成~~~ ...

3 条评论您还未登录，请先登录后发表或查看评论

阿里巴巴矢量图标库——使用步骤

最新发布

2302_81312344的博客

10-20

431

阿里巴巴矢量图标库——使用步骤

如何在项目中使用阿里巴巴矢量图标库

hsyldw2000的博客

01-03

2099

font-class：是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。与unicode使用方式相比的特点是兼容性良好，支持ie8+及现代浏览器；使用class来定义图标，所以替换图标时，只需要修改class里的unicode引用即可。与上面两种相比的特点：支持多色图标，不受单色限制；特点是兼容性最好，支持按字体的样式去动态调整图标。5.点击创建项目，输入项目名称点击确定，选择项目名称，点击跳转到我的项目页面。2.搜索您所需要的图标，选择您所需要的样式，点击购物车。

uniapp项目添加iconfont项目

weixin_51626490的博客

08-24

248

6.更改iconfont.css中相对路径。2.把需要的图标加入购物车，添加到项目。,woff,woff2文件到项目中。3.去我的项目中把图标下载到本地。5.在App.vue中引入css。添加iconfont到项目中。

如何添加Iconfont图标到项目及创建新项目？

Sun_小杰杰哇

10-28

4416

1、搜索图标或者选择自己上传图标。 2、选择图标，加入库。 3、点击购物车图标，如果已经创建项目直接选择点击确定；如果没有创建项目点击+创建项目。 4、输入新项目名称，点击确定。 5、确定后进入“我的项目”页面，里面有添加的图标。 6、图标添加完成，可以选择使用Unicode、Font class、Symbol三种方式引入图标。第一次创建无代码生成，点击生成代码，复制代码到项目，引入即可使用。 ...

阿里巴巴矢量图标库导入到自己的项目中

weixin_57605398的博客

06-15

1083

阿里巴巴矢量图标库导入到自己的项目中 1.新建项目 2.搜索你自己要的图标加入到购物车然后添加到你创建的项目中 3.在项目中使用 3.1.1在项目中创建一个css文件 3.1.2在App.vue中引入 3.1.3使用 <text class="iconfont i-youkuohao" style="color:#999999"></text> ...

如何在项目中使用阿里巴巴矢量图标

03-27

在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...

最新版微信小程序如何引入iconfont阿里矢量图库解决方案

明哥

03-03

3729

前言：问题引发的原因来自最近在写微信小程序教学项目，项目中的一个图片是我随手切的,因为之前在Vue项目中一直在使用阿里矢量图库,我就想把阿里矢量图库ico图标集成到自己项目中,百度看了一些博客跟着做都引入不成功,研究了二十分钟弄出来,特此记录一下,同时作为参考文档供教学使用。 1、首先我们打开阿里矢量官网接着我们需要登录一下,如果没有账号这里可以使用微博注册登录一下,登录成功后,点击【资源管理-->>我的项目】接着我们点击【新建项目】填写【项目名称：这里随便...

精选资源

在react native中使用阿里iconfont图标

01-08

1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下：打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...

【Flutter 问题系列第 54 篇】Flutter 引入阿里矢量图标库的详细图文教程

“Allen Su”的博客

01-07

1660

Flutter 引入阿里矢量图标库的详细图文教程

阿里矢量图标库WPF使用Demo

12-27

将阿里矢量图标库与WPF结合使用，可以将这些图标作为字体资源嵌入到WPF应用中。WPF应用程序可以直接使用字体资源，使得开发者能够在应用程序中轻松地应用这些图标。这个过程包括以下几个步骤： 1. 访问阿里矢量图标...

阿里巴巴的iconfont怎么使用

jo_an_na的博客

04-09

1453

1、百度http://www.iconfont.cn/2、输入要查找的字体图标，选择我们需要的图标3、鼠标放到图标上面，选择加入“购物车”4、到购物车中，选择“添加到项目中”5、新建项目名称6、到购物车查看7、下载至本地8、打开下载的内容如下9、新建一个HTML文件，引入css文件，给元素加上累名，先加上iconfont，再加上对应的下载的元素的类名10、在网页中预览刚才下载的字体图标11、完成啦...

如何在inconfont创建新的项目并添加图标

闫小样丶的博客

09-25

2314

一、创建新项目 1. 首先进入iconfont图标库，登录账号。 2.点击图标管理--我的项目 3. 点击右侧的新建项目 4. 填写相关的信息 5. 点击新建完成项目二、添加图标 1.项目新建完成后，往项目里添加我们想要使用的图标，找到图标库，搜索一个想要的图标，然后添加至购物车； 2.把选中的图标加入我的项目，点击加入购物车 3. 添加至购物车完成后，...

如何将iconfont引入自己的项目

weixin_34357267的博客

02-26

1535

文章转载于：https://www.cnblogs.com/hjvsdr/p/6639649.html step 1:找到阿里巴巴矢量图标库官网https://www.iconfont.cn,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点击新建项目,用于保存自己常用的图标; step 3:...

vue项目中引入iconfont

2401_84447149的博客

04-27

1241

兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。

阿里iconfont使用方法

QW's Blog

02-14

8037

阿里巴巴iconfont的使用方式分为两种：本地使用线上引用 iconfont-阿里巴巴矢量图标库 0.前期准备使用时先到网站上选中需要使用的图标添加至项目 1.本地使用 1.下载项目至本地 2.解压到项目中 3.在页面中引入样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

【iconfont】如何将iconfont图标直接引入项目里，避免重复切图

Owen的博客

10-19

2653

一、前言 iconfont图标，用一个class名称，或者几个字母的Unicode就能在页面上展示，可以像字体一样，用font-size、color等去设置样式。减少图片请求，加快页面加载速度，大家用起来吧。二、步骤 1、先在iconfont（阿里巴巴矢量图标库）网站上注册，这个不用多说。网址： https://www.iconfont.cn/ 2、建立项目（资源管理-我的项目-点击新建项目）新建项目（一些简单的描述配置）新建好之后的项目就在-我发起的项目 3、管.