iconfont阿里巴巴矢量图标库是一个由阿里巴巴mux精心打造的矢量素材图标管理平台，专为图标设计师们量身打造，致力于提供原创设计的图标方案。该平台集成了图标检索、下载、提交和管理等多种功能，并允许将图标转换为字体，便于web前端使用。以下是如何使用iconfont阿里巴巴矢量图标库app的详细教程。
1. 注册与登录首先，您需要在iconfont官网（[iconfont.cn](https://www.iconfont.cn/)）注册一个账号。注册完成后，登录您的账号，进入iconfont平台。
2. 浏览与选择图标
2.1 浏览图标库在iconfont首页，您可以浏览到各种分类的图标库，包括官方图标库、用户自定义图标库和多色图标库。您可以通过关键字模糊搜索来快速找到您需要的图标。
2.2 选择并加入购物车找到您喜欢的图标后，点击图标进入详情页面，然后点击“加入购物车”按钮。当您选择完所有需要的图标后，点击右上角的购物车图标，进入购物车页面。
3. 下载图标
3.1 下载文件至本地在购物车页面，您可以选择将图标直接添加到项目、下载矢量图文件或将图标下载为字体文件。选择“下载文件”选项，您会获得一个包含所有选中图标的压缩包。
3.2 解压文件解压下载的文件，您会看到其中包含`iconfont.css`、`iconfont.ttf`等文件。
4. 引入图标到项目
4.1 引入`iconfont.css`文件将`iconfont.css`文件放入您的项目文件夹中（通常放在`static`文件夹里）。然后在您的项目文件（如`app.vue`）中引入该css文件。
```html
```
4.2 替换字体文件为base64格式（可选）如果您希望将字体文件嵌入到css中，可以使用base64编码。将`iconfont.ttf`文件上传到一个base64转换网站（如file to base64 encoder），将生成的base64字段复制并替换到`iconfont.css`文件中的`@font-face`部分。
```css
@font-face {
font-family: "iconfont";
src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format(⁄'truetype⁄');
}
```
4.3 使用图标根据您的项目需求，您可以通过以下三种方式使用图标：
- unicode方式：将图标的unicode编码应用到html标签中。
```html
&xe661;
```
- font class方式：使用图标的类名应用到html标签中。
```html
```
- symbol方式：使用svg标签和``元素引用图标。
```html
```
5. 高效使用插件（如pixso）
如果您使用在线设计工具如pixso，可以通过插件广场直接安装iconfont图标插件，实现在设计工具中一站式搜索和使用iconfont中的图标资源。
5.1 安装iconfont插件在pixso插件广场中，搜索并安装iconfont插件。
5.2 使用插件安装完成后，打开pixso工作台，在插件中找到iconfont插件并打开。您可以在插件中搜索图标、修改图标颜色、选择样式和大小，并将图标直接拖放到设计文件中。
6. 管理与修改图标
6.1 管理图标库您可以在iconfont平台上管理自己的图标库，包括创建新的图标