What is a font icon in html5

In HTML5, font icon is an icon font used in Web projects. Its essence is a special font. Through this font, it is displayed to the user just like pictures. Font icons can be arbitrarily controlled in size and color through CSS just like text, which is very convenient for building websites.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

What is a font icon?

Font icon is simply a special font. Through this font, it is displayed to the user just like pictures. The biggest advantage of font icons is that they will not deform and load quickly. Font icons can be arbitrarily controlled in size and color through CSS just like text, which is very convenient for building websites.

Font icons are fonts that use tiny images instead of letter forms. Like characters, each icon font is a vector element that scales as needed and can be modified using CSS styles.

The main reason to use icon fonts is that you can easily change the size, color, shape. Icon fonts are transparent in nature, so you can place them on any color or type of background, and you can also add strokes or change the opacity of the icons.

All setup operations can be done using CSS, so you don’t have to create a unique image for each new icon instance in your design (which is great for keeping your website design and code lightweight).

Icon fonts are vector images, which means they can be scaled without distortion. Like other fonts, you can make them larger or smaller as needed. Use icon fonts only as artistic elements, even in other text fields.

Advantages and disadvantages of using font icons

1. Advantages

• Icons are easy to scale as long as the corresponding classes exist in CSS;

• You can easily get large existing icon libraries on the Internet;

• It's very easy to change icon properties, no matter what you use to build your website;

• It's easy to add icons to any page on your website design (just insert the icon name);

• There are thousands of icons to choose from in various styles;

• If you need higher customization, you can even create your own icon font.
  

2. Disadvantages

• The icon is a single color or gradient color (in most cases, But some services that offer more customization options are changing this);

• If the icon font cannot be loaded, there are no other fallback fonts to use;

• You may not need the full icon set;

• Some browsers do not yet or do not fully support icon fonts;

• You may not find a resource that suits your needs.
  

There are two ways to obtain font icons

• Alibaba vector icon official website : www.iconfont.cn (recommended)

• Foreign website: http://icomoon.io
  

##How to use font icon?

Due to the slow loading speed of this foreign website, here I use the icon library provided by Alibaba to demonstrate

(1) Search in the browser iconfont, find the official website of Alibaba Vector Icon Library, and then register and log in. If you have registered before, skip this step;

(2) Move the mouse into the icon library, there will be a drop-down list, select Official icon library;

(3) Click on the first icon library in the list to open a new page and add your favorite icons to the library;

Add to the library:

(4) There is a shopping cart in the upper right corner, you add it to the library All the font icons inside are inside;

(5) Click to add to the project

Then the webpage will automatically jump to the corresponding project, as shown in the figure:

Download to local: (The most critical step)

The downloaded and decompressed file is as follows:

(6) How to use font icons in the project? It is actually very simple. Create an i tag or span tag, add a class name and paste the corresponding code into the tag.

To open this demo_index.html, you only need to copy this string of code as shown:

Then paste iconfont.css into the css folder. This is My project folder and corresponding code:

This is the font icon seen in Google Chrome (I think the font is too If it is small, it can be controlled through the font-size attribute).

Related recommendations: "html video tutorial"

The above is the detailed content of What is a font icon in html5. For more information, please follow other related articles on the PHP Chinese website!