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

最新推荐文章于 2025-05-03 13:30:00 发布

Heart&Fire

最新推荐文章于 2025-05-03 13:30:00 发布

阅读量3.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： iconfont 文章标签： html

本文链接：https://blog.youkuaiyun.com/my_batis/article/details/124444348

iconfont 专栏收录该内容

1 篇文章

订阅专栏

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

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

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

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

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

“Allen Su”的博客

01-07

1450

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

vue项目中引入iconfont，初学者必看

2401_84097427的博客

04-04

2474

兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。

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

如何将阿里巴巴矢量图标库iconfont引入到vue项目中？

日常分享工作中的一些技术干货。

12-25

1134

当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。

零基础入门：在VSCode中正确引入阿里巴巴矢量图标库的完整流程

2401_83607690的博客

05-03

1420

在浏览器中我们经常会看到一些图标比如🔍，本文将讲解如何获取这些图标元素，如何正确的将其导入VSCode以及如何设置这些元素的属性

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

hsyldw2000的博客

01-03

1537

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

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

weixin_57605398的博客

06-15

1058

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

如何将iconfont引入自己的项目

weixin_34357267的博客

02-26

1520

文章转载于：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

1155

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

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

03-27

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

在react native中使用阿里iconfont图标

01-08

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

uniapp 中使用彩色图标，引入阿里图库iconfont

hu104160112的博客

06-18

1917

1.选择symbol模式，下载到本地 2.下载后解压 3.在解压开的文件夹中 shift+右键打开powershell 窗口执行代码：npm install -g iconfont-tools 4.然后执行代码：iconfont-tools 然后一路回车 5.文件夹中就多出一个文件 iconfont-weapp 6.把 iconfont-weapp-icon.css 移入你的项目中 7.App.vue中添加以下代码 @import "./common/iconfont-weapp/iconf

阿里矢量图标库

04-26

阿里矢量图标库

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

Owen的博客

10-19

2558

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

uniapp添加iconfont到项目中

qq_33788609的博客

03-24

265

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

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

Sun_小杰杰哇

10-28

4269

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

uniapp项目添加iconfont项目

weixin_51626490的博客

08-24

201

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

iconfont引入方法

最新发布

06-01

### 在 UniApp 中集成和使用阿里巴巴矢量图库的方法在 UniApp 中使用阿里巴巴矢量图库可以通过以下方式实现，确保图标在不同平台（H5、小程序、App 等）上都能正常显示。 #### 1. 下载阿里巴巴矢量图标访问阿里巴巴矢量图标库官网 [https://www.iconfont.cn/](https://www.iconfont.cn/) 并注册账号。选择需要的图标加入购物车后，将其添加至项目中。如果没有现有项目，可以新建一个与当前开发项目名称一致的项目[^2]。完成后下载生成的压缩包并解压，得到以下文件： - `iconfont.css`：样式文件。 - `iconfont.ttf`：字体文件。 - 其他相关文件（如 `demo_index.html` 和 `iconfont.woff` 等）。将这些文件放入项目的合适目录中，例如 `static/font` 或 `common/icon`[^1]。 #### 2. 修改 `iconfont.css` 文件路径打开 `iconfont.css` 文件，找到类似以下代码的部分： ```css @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } ``` 将所有字体文件的路径修改为相对于项目根目录的正确路径。例如，如果将文件放在 `static/font` 目录下，则路径应改为 `/static/font/iconfont.ttf` 等[^2]。 #### 3. 引入 `iconfont.css` 在 `App.vue` 的全局样式中引入 `iconfont.css` 文件。确保路径正确无误： ```vue <style> /* 每个页面公共 css */ @import url("/static/font/iconfont.css"); </style> ``` #### 4. 解决移动端不显示问题由于 UniApp 在处理字体文件时可能会自动将其转换为 Base64 格式，但当 `.ttf` 文件大小超过 40KB 时，可能无法正确转换，导致移动端不显示图标[^3]。此时需要手动将 `.ttf` 文件转换为 Base64 格式。可以使用在线工具或脚本将 `.ttf` 文件转换为 Base64 字符串，并替换 `iconfont.css` 中的相应部分。例如： ```css @font-face { font-family: 'iconfont'; src: url('data:application/font-ttf;charset=utf-8;base64,AAEAAAA...') format('truetype'); } ``` #### 5. 使用图标在页面中通过类名使用图标。例如，如果图标对应的类名为 `icon-example`，则可以在模板中这样使用： ```html <view class="iconfont icon-example"></view> ``` ### 注意事项 - 确保 `iconfont.css` 文件中的字体路径与实际存放位置一致[^2]。 - 如果需要支持多端（H5、小程序、App），建议测试每个平台上的显示效果，必要时调整字体文件格式或编码方式。 ```python # 示例代码：检查字体文件路径是否正确 def check_font_path(css_file, font_directory): with open(css_file, 'r', encoding='utf-8') as file: content = file.read() if font_directory not in content: return False return True ```