阿里巴巴矢量图标素材库是阿里巴巴集团提供的一套高质量的矢量图标库，包含了众多精美的图标，涵盖了各种行业和场景。这些图标具有精准的几何形状和独特的的设计风格，可以满足设计师和开发者对图标的需求。阿里巴巴矢量图标素材库不断更新，为用户提供最新、最全面、最优质的矢量图标。

一、简介

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

二、基础功能

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

三、关于使用

下载图标

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>