How to use Iconfont font icons-super easy! I previously because the project with bootstrap more, so the use of font awesome fonts, and later contact with the Iconfont, find out what icons you want to have, you can

How to use Iconfont font icons-super easy!

I previously because the project with bootstrap more, so the use of font awesome fonts More, then touch the Iconfont, find what icons you want to have, you can also customize the icon, very powerful! Before watching a wave of tutorials, feel tedious, Self-understanding after feeling so simple, did a simple tutorial, directly on the map, simple rough, to avoid the novice detours, the default is to explain the use of the class name of the element;

Step 1: Baidu Iconfont, find Alibaba vector icon Library website, and then register login, or use GitHub login also line, this step skip;

Step 2: Find icon Management--my project and then create a new project:

Click on the new item on the right to save your favorite icons.

Step 3: After the project is newly completed, add the icon we want to use in the project, find the icon library, search for a desired icon, and add to the cart;

I will now add the first Android icon to my project and click Add to Cart

Step 4: After adding to the shopping cart completed, the shopping cart badge number should show 1, click on the top right corner of the shopping cart icon, select Add to Project, select the project we just created, OK;

Automatically jump to the corresponding project, as shown in the figure:

Step 5: The next key is to download the packaged font file locally to your project, referencing the file's Iconfont.css file in the project;

Download the extracted files below:

Once again, put these files in a folder, put them in your project directory, and introduce ICONFONT.CSS files into your project.

Step 6: To the last step, how to use the font icon in the project, it is very simple, create an I tag or span tag, add two class name, a fixed is Iconfont, the other is the icon you want to the corresponding class name:

The specific code is as follows:

OK, refresh the page, the icon is not out of it?