How to use iconfont font icon in vue project (upload svg yourself to generate iconfont)

1. Log in to Alibaba font icon official website

iconfont-Alibaba vector icon library

 

2. Follow the steps below

1. Click Resource Management - My Projects - New Project in the upper navigation bar

 

2. Fill in the new project form

3. Click on the newly created project name on the left - Upload icon to project - Select local svg file to upload - Pending review, click Remove Color and Submit button 

 

4. After submitting, click "No code yet, click here to generate" to generate the code address and copy it 

 

3. Introducing styles into the project

Method 1: Copy the style code after opening the above link, create a new icon.css under the styles folder in the project and paste the style code just copied, and introduce it (choose 1 from 2 ways) (1) Introduce it in

index.css icon.css ( @import )

@import "./icon.css";

(2) Or introduce icon.css ( import ) into main.js in the project

import "@/styles/icon.css"

Method 2: Directly introduce it into the style of the page that needs to use the font icon

Note: You need to add http: in front of the copied address :

<style lang="less" scoped> 
@import "http://at.alicdn.com/t/c/font_4153392_o81rmnxariq.css"; 
</style>

Method 3: Download the font icon file to local 

Step 1. Click to download to local

Step 2: Unzip the downloaded font icon file, change the file name to font, and copy the font folder to the styles folder under the project

Step 3: Introduce in main.js

import "@/styles/font/iconfont.css"

4. Use font icons on the page

   <div class="iconfont icon-shouye"></div>
   <div class="iconfont icon-fenxiang"></div>

5. Effect display

As shown in the figure, the configuration is successful.

Summary : In general projects, it is recommended to use method 3 to download the font icon file to the local