What are font icons?
字体图标顾名思义就是字体以图标的显示,图标字体主要应用于web前端开发。
Advantages of quoting font icons:
1. Stronger scalability: icon fonts can be scaled, changed color, shadow or transparency effect.
2. Higher flexibility: Icon fonts can be well supported by CSS, and the size and color are easily controlled by CSS.
3. Good display effect: The vector icon font has nothing to do with the resolution, no matter whether the screen PPI is high or low, the display effect is good.
4. Wider compatibility: If used properly, the icon font is 100% accessible and compatible with almost all browsers.
5. Good optimization effect: The information carried is not reduced due to the smaller font size of the icon, which can greatly reduce HTTP requests.
Reference preparation for font icons: First search iconfont (font icon vector library), find the icon you need to add to the shopping cart, then add to the project, click download to local and unzip
Reference method:
Unicode citation
Unicode is the most primitive application method of fonts on the web. Its characteristics are:
It has the best compatibility, supports IE6+, and all modern browsers.
Supports dynamically adjusting icon size, color, etc. by font.
But because it is a font, multi-color is not supported. Only single-color icons in the platform can be used. Even if there are multi-color icons in the project, it will be automatically decolorized.
Unicode Reference Step 1: Create a new basic HTML project, copy the downloaded eot file, woff file, woff2 file, ttf file, and svg file to the font folder of the project;
Step 2: Open the html file in the downloaded folder ( It displays the font icon you selected in the project before), click Unicode, copy the @font-face generated under the project, create a new html file under the project, and put the copied @font-face in style
Step 3: Define the style of using iconfont
For example:
Step 4: Select the corresponding icon and get the font code, and put it in the body
For example: the font code corresponding to this icon is Okay
! ! ! !