iconfont阿里巴巴矢量图标库app如何使用

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平台上管理自己的图标库，包括创建新的图标