When we browse a webpage, we will encounter many interesting small icons, which form a friendly interaction with visitors, so we will insert some vivid and interesting icons in the development to attract visitors. There are many websites for inserting icons. Here I will take the Alibaba icon library ( iconfont-Alibaba vector icon library ) as an example to explain that there is no need to download icon source code to use small icons. Most of them download the source code to a local folder and write some It is very troublesome to refer to CSS styles through links.
Step 1: We enter the Alibaba icon library on the Internet, enter the home page, and search for the icon you want in the search bar
When I directly enter the search here, many small search icons pop up. Let's choose a favorite style and click it to add it to the shopping cart, you will see the icon belonging to the shopping cart in the upper right corner and click to go.
Add the icon to the project you created. If you have not created a project, click New Project (the button on the right of Add Project), and then click OK.
After joining, the Unicode interface will pop up. We switch to the Font class page, and then click to view the online connection. Then copy the code below the Font class.
Step 2: We enter the compiler (the hbuder x compiler compiler I use here is small and light, and does not take up a lot of running memory), and then insert the link external link in the head tag of the header file, and paste it after the href you just copied the code
Then go to the icon project of the Alibaba icon library, find any icon you like and copy its code.
Then go to the body tag and insert the i tag. The attribute behind the class class is the icon code, that is, the code of the icon you copied above, and the iconfont is the font icon after the space, which means that you must add the icon format if you want to use the icon later.
In this way, we can use the icon. If we want to add CSS attributes to the icon, we can set it in the style. The format is (one point plus icon code). I set a mouse to hover over the icon to make it white and add a black background. (hover).
no hover 
hover look
Attention! Attention! If you add other icons to the icon project of the Alibaba icon library, remember to click Update Code and replace the code you originally copied with this new code (copy to the link tag href to replace the previous code). It is very important to remember this in the small book. If you do not replace it, the icon you added will not be displayed!
It is not easy for the author to make, remember to support it a lot, thank you!