提醒：本文最后更新于 2026-05-24 06:13，文中所关联的信息可能已发生改变，请知悉！

阿里巴巴矢量图标库是国内功能很强大且图标内容丰富的矢量图标库，通过了解其基础功能以及相关的使用说明功能够更好地为用户解决设制作字体图标困难等问题。

编辑

一、简介

阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，是设计师和前端开发的便捷工具。

二、基础功能

图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

三、关于使用

下载图标

1. 首先搜索阿里巴巴矢量图标库，进入网址；

2. 在右上角的搜索，搜索自己要的图标，或者选择去图标库自行选择想要的图标

3. 选择图标，点击图标变成橘色，即放在暂存架

4. 再次点击即可取消，或者在暂存架中鼠标滑过图标，图标右上角有删除小按钮也可删除选中；

5. 选择好要用的图标后，点击暂存架的下载至本地，解压待用；

项目引用

1. 打开解压的文件夹中的 demo.html

官网

2. 可以看到已下载的图标可看到了吧，按照 demo 的步骤，下面我们配置 ionic 的项目

3. 静态文件存放目录，新建 font 文件夹用来存放字体文件（可自定义存放）

4.css 使用 font-face 声明字体

@font-face {font-family: ‘iconfontyyy’;
src: url(‘iconfont.eot’);
src: url(‘iconfont.eot?#iefix’) format(’embedded-opentype’),
url(‘iconfont.woff’) format(‘woff’),
url(‘iconfont.ttf’) format(‘truetype’),
url(‘iconfont.svg#iconfontyyy’) format(‘svg’);
}

5.css 定义使用 iconfont 的样式

.iconfontyyy{
font-family:”iconfontyyy” !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

6. 挑选相应图标并获取字体编码，应用于页面

<i class=”iconfontyyy”>&#x33;</i>

Tab 及其他标签引用图标

1. 打开直接解压的图标文件中的 iconfont.css 文件

2. 将.icon-XXX:before{content:’XXXX’}也复制到你的 css 文件中
例：

}
.icon-nvbao:before{content:”\f009c”;}
.icon-jiezhi:before{content:”\f00a3″;}
.icon-gaogenxie:before{content:”\f009a”;}

3. 只要在 class 中加 iconfont icon-XXX 就可以使用图标

例：<i class=”iconfont icon-gaogenxie”></i>

阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，是设计师和前端开发的便捷工具。

阿里巴巴
阿里巴巴

图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

下载图标

1. 首先搜索阿里巴巴矢量图标库，进入网址；

阿里巴巴

2. 在右上角的搜索，搜索自己要的图标，或者选择去图标库自行选择想要的图标

3. 选择图标，点击图标变成橘色，即放在暂存架

4. 再次点击即可取消，或者在暂存架中鼠标滑过图标，图标右上角有删除小按钮也可删除选中；

5. 选择好要用的图标后，点击暂存架的下载至本地，解压待用；

项目引用

1. 打开解压的文件夹中的 demo.html

官网

2. 可以看到已下载的图标可看到了吧，按照 demo 的步骤，下面我们配置 ionic 的项目

3. 静态文件存放目录，新建 font 文件夹用来存放字体文件（可自定义存放）

4.css 使用 font-face 声明字体

@font-face {font-family: ‘iconfontyyy’;
src: url(‘iconfont.eot’);
src: url(‘iconfont.eot?#iefix’) format(’embedded-opentype’),
url(‘iconfont.woff’) format(‘woff’),
url(‘iconfont.ttf’) format(‘truetype’),
url(‘iconfont.svg#iconfontyyy’) format(‘svg’);
}

5.css 定义使用 iconfont 的样式

.iconfontyyy{
font-family:”iconfontyyy” !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

6. 挑选相应图标并获取字体编码，应用于页面

<i class=”iconfontyyy”>&#x33;</i>

Tab 及其他标签引用图标

1. 打开直接解压的图标文件中的 iconfont.css 文件

2. 将.icon-XXX:before{content:’XXXX’}也复制到你的 css 文件中
例：

}
.icon-nvbao:before{content:”\f009c”;}
.icon-jiezhi:before{content:”\f00a3″;}
.icon-gaogenxie:before{content:”\f009a”;}

3. 只要在 class 中加 iconfont icon-XXX 就可以使用图标

例：<i class=”iconfont icon-gaogenxie”></i>

阿里巴巴