Alibaba icon official website address: IconFont- Alibaba vector icon library

First, register an account

To use ali icon, first you need to register an account on its official website. There are many ways to register (mobile number, Github, Weibo, Ali domain account), according to your own situation to choose. The specific operation is very simple, so I won’t repeat it here.

2. Create a project

Although you can use font ICONS by downloading code directly without creating a project, it can be a hassle to maintain later. Let’s say you’ve created a font icon file and used it in your project. If you want to append ICONS later (the original ICONS are not enough), since you have not created a project before, it is very expensive and cumbersome to append ICONS. Therefore, it is necessary to create a separate font icon project for each project.

The creation process is as follows:

Find “Resource Management” in the menu => “My Project” and click enter. After entering, click “New Project” on the right, as shown below

[New Project] After clicking the button, the following form will pop up. Fill in the relevant content according to the project you have developed

  1. Project name: It is recommended to fill in the same name as your development project, after the project is more distinguishable search
  2. Project description: You can fill in this by yourself, whatever you want
  3. FontClass prefix: this is to define the font icon style prefix, the default icon, can be modified, can also not change, depending on your own project requirements
  4. Font Family: the name of the Font, the default is iconfont, can be modified, or not changed, depending on your needs
  5. Font format: Here is to choose which font file format to generate, because different browsers may have different compatibility, recommended to choose WOFF2 WOFF TTF. If you need a color icon, select Color.
  6. Owner: The default is the person who created the project, which cannot be modified in the current screen. For example, you can transfer the ownership of the project to your colleagues when you leave the company and need to make a handover.
  7. Operator: Cannot be modified in the current interface. In the later stage, the project was modified through [project members]. Since several colleagues usually work on a project together, relevant colleagues can be pulled into the project after the project is created, so that colleagues can access the icon project

Supplementary notes:

  • To demonstrate this, I created a project called DemoFontProject, which will be used when importing ICONS into the project
  • There are official instructions on font format, as follows:

Iconfont now supports the ability for users to flexibly configure the generated font format. You can select the desired font format from “My Project” → “Project Settings” → “Edit Project” → “Font Format”. By default, WOFF2, WOFF and TTF formats are generated. .eot(IE6) and.svg are very “old” font formats and are not OpenType standards, we will disable them by default and do not recommend using them in projects, you can manually enable them if necessary. The two formats are not supported in color fonts. If the color option is selected, the two formats are automatically disabled. Base64 is also disabled by default for performance reasons.

After the project is created, you can edit the project, transfer the project, delete the project and manage project members by clicking the following buttons:

3. Select the icon and add to the shopping cart

Select the ICONS you need for your project in the Ali icon library and add them to the shopping cart, as shown below

Import the shopping cart icon into the project

Once you have selected all the ICONS and added them to the shopping cart, you can import them into the project. Specific steps:

  1. Click the “Shopping cart” button in the upper right corner, and the shopping cart button will show how many ICONS there are in the current shopping cart
  2. Click the “Add to Project” button in the box that pops up
  3. Select the icon project that you want to create, so here’S the DemoFontProject that you just created.
  4. Click “OK”

5. Download the icon file to the local PC

After the ICONS are imported into the project, we can view the project and see the imported ICONS. We can directly click download to local.

Download down is a compressed file, decompressed after the following figure

Add the font icon file to the project

We create a fonts folder under assets folder in the project, and then copy the files downloaded in step 5 into the fonts folder. After adding, the picture is as follows:

The demo_index. HTML and demo. CSS files can not be added to the project, but for the convenience of viewing the style name and corresponding icon, it is more convenient to put them in the project. If you really don’t want to put them in your project, delete them and then go to the iconfont website and go to the icon project.

Vii. Use in the project (VUE project as an example)

Once the font file has been added to the project, to use it in the project, we need to import the style file by importing iconfont. CSS file in main.ts. The diagram below:

Since my project is developed in typescript, the file name extension is.ts. If your project is not developed in typescript, import iconfont. CSS in main.js.

You can then use ICONS with styles in your project

<i class="iconfont icon-add-circle"></i>
<i class="iconfont icon-arrow-up-circle"></i>
Copy the code

Where iconfont is the name defined in [Font Family] in [New project], if you created the project with [Font Family] filled in xxYY, then use it as follows:

<i class="xxyy icon-add-circle"></i>
<i class="xxyy icon-arrow-up-circle"></i>
Copy the code

We find that all style names have the same prefix icon. Above, icon-add-circle and icon-arrow-upcircle are all prefixed with icon, which is also defined in New Project by FontClass prefix. The prefix we define is icon, so they’re all prefixed with icon.

Finally, a brief word about the issue of adding ICONS: if the project enters the development stage and you find that ICONS are not enough, you just need to add ICONS to the icon project we created, then download the file again, and then overwrite the file under the original fonts file. Ok, the whole process of using iconfont is introduced, if you have any questions, you can leave a message, thank you 🙂