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

Source: Internet
Author: User
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?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.