Introducing font icons in Vue

Introducing font icons in Vue

1. Ali’s font icon library used in this article only explains how to import the Font class, and does not describe the other two: Unicode and Symbol.

download font icon

1. Ali's font icon library is used in this article, the address is: https://www.iconfont.cn/

2. Select the font icon you need and click Add to library

   

3. After the selection, click the logo of the shopping cart in the upper right corner to find all the font icons that have been added to the warehouse

   

4. Click to download the code

   

Font class way to use font icons

1. Unzip the downloaded download.zip package, open the Vue project that needs to import font icons, create an iconfont folder under the assets folder in the project, and copy the files in the downloaded download.zip package to iconfont

   

2. Import iconfont.css globally in the main.js of the Vue project, pay attention to the import path and make no mistakes

   import './assets/iconfont/iconfont.css';
   

3. Add the following css styles to the App.vue global style

   .icon,
   .iconfont {
         
         
     font-family: "iconfont" !important;
     font-size: 30px;
     font-style: normal;
     color: #1989fa;
     -webkit-font-smoothing: antialiased;
     -webkit-text-stroke-width: 0.2px;
     -moz-osx-font-smoothing: grayscale;
   }
   

4. In the class name of the html tag that needs to use the downloaded font icon, write the class name of the corresponding font icon, such as:

   <div class="icon iconfont icon-yuqi"></div>
   

5. To view the class name of the downloaded font icon, you can go to the downloaded download.zip and open the demo_index.html web page to view it