1. Introduction of iconfont
iconfont official website:
iconfont-Alibaba vector icon library
1-Select the desired icon to the shopping cart
2-Add to your own project
3-The font I chose here is a personal preference and I think it is more convenient. There are other ways to choose. The steps are similar. Click to generate the code and download it locally (of course you can also choose to use it online)
4-Add iconfont.css, etc. to your project
5-Introduce css files into main.js
At this point you can use our iconfont
How to use it
In iconfont.css there is the name of the icon we downloaded, such as my mall
Then you can use it where you need to use it through the i tag and add the corresponding class (remember to add the class iconfont)
Rendering:
Two: Dynamically modify iconfont color
If you only need to modify the color without dynamic modification, then you only need to set the color directly in the iconfont.css file.
If you want to dynamically modify the color, we can see that iconfont is actually implemented using pseudo-classes, so it is essentially a dynamic modification of our pseudo-class css. This requires the use of the var function in css. I won’t go into details here. Let’s go directly. method
Use dynamic style to set the color, assign the color of our variable color to --color, and then use var to set the color in the pseudo class
At this time, you can dynamically modify the color of the iconfont!
Similarly, other requirements that require modification of pseudo-classes can also be achieved through var.