What is a font icon in html5

青灯夜游
Release: 2022-01-11 14:43:52
Original
3601 people have browsed it

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.

What is a font icon in html5

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.

What is a font icon in html5

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;

What is a font icon in html5

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


What is a font icon in html5

Add to the library:

What is a font icon in html5

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


What is a font icon in html5

(5) Click to add to the project

What is a font icon in html5

What is a font icon in html5

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

Download to local: (The most critical step)

What is a font icon in html5

The downloaded and decompressed file is as follows:

What is a font icon in html5

(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:

What is a font icon in html5

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

What is a font icon in html5

1What is a font icon in html5

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).

1What is a font icon in html5

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template