The free font icon used this time is iconfont
1. Click me to enter the official website
2. Specific process
1. Find the icon you need in the search box above, then add it to the shopping cart, and then click the shopping cart in the upper right corner after selection. 2. Add
to the project. If there is an item, select the item to add. If there is no item, create the item.
3. After confirming, enter your project (you can see all the icons in your project), click to download to the local
4. Unzip, create an iconfont folder under the assets of our project, and copy all the files in the decompressed package to the iconfont folder. 5. Go
to Main.ts or main.js import assets -> iconfont -> iconfont.css and iconfont.js globally
// 引入阿里云字体图标css
import '@/assets/iconfont/iconfont.css';
import '@/assets/iconfont/iconfont.js';
3. Open our font preview file, you can see the class and unicode code of each icon
The file path is in assets -> iconfont -> demo_index.html, after opening it looks like this
4. Verification practice
下面以icon-user为例
1. Use of class style
<span class="iconfont icon-user"><span>
2. Use of Unicode
Labels can also be used directly
<span></span>
3. The pseudo-class selector is a bit like regular code例如\e64b
This is generally used to locate the icon to a certain position on the page, set
this code in the content of both ::before and ::after This code is in the content code of the corresponding icon in assets -> iconfont -> iconfont.css
div::before{
content: '\e64b'
}
5. Why do you want to write this article?
Because every time you start a new project or rebuild a personal project, you have to spend some time reading a lot of tutorial articles. You can save a lot of time by simply writing an article yourself and taking notes and reviewing it later when you need it.