Use the font icons of the Ali icon library in Vue and WeChat applets

Using Font Icons in Vue and WeChat Mini Programs

Using font icons in Vue

Using font icons online in Vue

1. First open the official website of Ali Icon: https://www.iconfont.cn/

2. If you do not have an account, you can register by yourself

3. After the registration is complete, automatically search for the icon name on the home page and press Enter:

4. Display of search results:

5. You can select the corresponding icon according to your own needs, move the mouse to the icon, and then click Add to the library:

6. If you need more icons, add them one by one according to the above method

7. After adding, click the shopping cart icon in the upper right corner:

8. Then click Add to Project below, select the corresponding project to save, if there is no project, you can choose to add project:

9. After the addition is complete, you will enter the created project page:

10. Click the blue font no code yet, click here to generate an online use link:

11. Click Copy, open your Vue project, and introduce this link in the head of the index.html file under the public folder

12. After importing, open the place where you need to use the font icon. The initial html result and style of this example are shown as follows:

• front page
• search
• shopping cart
• mine


13. After the reference, add the prefix class name class="iconfont" to the label where the font icon is displayed:

• front page
• search
• shopping cart
• mine

14. Return to the Ali icon official website:

15. Put the newly assigned icon into the specified label class name, as shown below:

16. After adding, let's take a look at the display effect:

17. You can see that it has been used successfully. You need to add other font icons and repeat the above steps. To modify the font icon style, you only need to modify the font color and font size.

Using font icons locally in Vue

1. Return to the official website of Ali, find the corresponding font icon item, and click to download to the local:

2. After the download is complete, you will get the same compressed file, decompress it, and assign the following files:

3. The number of font files to download depends on the project settings. You can click the project settings option in the project to view them. Put the copied files into the assets folder of the Vue project. You can put them directly or create a new iconfont file Folder, put it into iconfont, the directory structure diagram is as follows:

4. Enter the iconfont.css file and modify the path of the content in @font-face as follows:

(1) Before modification:

@font-face {
  font-family: "iconfont"; /* Project id 3863872 */
  src: url('iconfont.woff2?t=1673686735316') format('woff2'),
       url('iconfont.woff?t=1673686735316') format('woff'),
       url('iconfont.ttf?t=1673686735316') format('truetype');
}

(2) After modification:

@font-face {
  font-family: "iconfont"; /* Project id 3863872 */
  /* 路径修改为相对路径，具体路径以自己的项目为准 */
  src: url('./iconfont.woff2?t=1673686735316') format('woff2'),
       url('./iconfont.woff?t=1673686735316') format('woff'),
       url('./iconfont.ttf?t=1673686735316') format('truetype');
}

5. Then you can find the icon class name under the iconfont.css file, the red box is selected, that is, the class name we need to use:

6. This step is very important. Introduce the iconfont.css file in the entry file main.js file:

// 引入字体图标文件
import '@/assets/iconfont/iconfont.css'

7. @ indicates the src directory. If you have not configured to use a relative path, the following usage method is the same as the online usage. Add the iconfont prefix and font icon class name to the label:

• search
• shopping cart
• mine

8. The display effect is as follows:

Use font icons locally in WeChat applets

Online use is not supported in the WeChat applet, so only local use is explained here

1. Tips: If the WeChat applet is downloaded to a local file, you need to download the font file in base64 format, click on the project settings, and check the base64 format:

2. Download the font icon file, decompress it, and find the corresponding iconfont.css and font files. These steps will not show you the demonstration

3. Generally speaking, the more standard way of writing is to create an icons folder in the root directory, and add the copied font icon file to this directory:

4. Modify the suffix name of iconfont.css, change css to wxss

5. You can choose to import it globally in app.wxss, or you can choose to import it in the wxss file of the page. This example imports it globally in the app.wxss file:

/* 记得末尾添加分号，否则会编译错误 */
@import '/icons/iconfont.wxss';

6. The follow-up is to use the font icon class name in the structure normally:

• search
• shopping cart
• mine

7. Display as shown in the figure:

• shopping cart
• mine
• 7. Display as shown in the figure: