What is iconfont? Summary of iconfont instance usage in css

iconWhat is font?

What is iconfont? Summary of iconfont instance usage in css should be a relatively mature technology today. If IconFont is broken down, it is Icon and Font. I guess everyone should be able to understand what it is. What about combining the two? That’s right, it’s IconFont ~. Use font tools to convert the graphic icons (icons) we usually use on the Web into web fonts, which become icon fonts. They can be embedded into web pages with the help of CSS @font-face to display icons. Because fonts are vector graphics, they are inherently "resolution independent" and can be perfectly scaled at any resolution and PPI. They will not be aliased after enlargement like traditional bitmaps such as png and jpeg. or blurring. The following article is to talk about the usage of What is iconfont? Summary of iconfont instance usage in css examples.

What is iconfont? Summary of iconfont instance usage in css instance usage

1. What is Iconfont? Introducing the benefits and use of Iconfont

What are the benefits of Iconfont?

Freely change the size

Freely modify the color

You can add some visual effects such as: shadow, rotation, and transparency.

Compatible with IE6

The above points are not completely defeated by the original icon. The disadvantage is that the color is too monotonous and is a solid color.

The picture below is part of the content in the css file of font-awesome. From the name, it looks like the definition of icon, but \f002 \f003 what exactly are these contents? You will understand after opening the downloaded font file using font editing software.

2. Detailed explanation of What is iconfont? Summary of iconfont instance usage in css font icons and various css small icons

Usually we put These graphics are cut into sprite images (also called sprite images);

The principle of sprite images is to combine many small images into one large image, and then display the image by setting the position of the background image;

Advantages of sprites: reduce the number of server requests and reduce server pressure;

sprites is a good tool for making sprites;

Of course there are other ways to make them These small graphics, such as the font icon What is iconfont? Summary of iconfont instance usage in css used by Tmall in the picture above;

font icon, as the name suggests, is a font. Like the font, it is a vector. We also call it a vector icon. You can enlarge it arbitrarily. No matter how small it is, there will be no distortion;

3. Detailed explanation of the use of What is iconfont? Summary of iconfont instance usage in css in CSS

Even if we don’t understand this English at first and don’t understand what it does, for What is iconfont? Summary of iconfont instance usage in css , when read from back to front in English, it should be called: font icon. This already contains two concepts, first it must be the font, and second, it must be the icon. We all know that we can control the size, style, deformation, stretching, default font and other attributes of fonts on web pages, so this What is iconfont? Summary of iconfont instance usage in css must be embedded in the style as text, so the font that comes to mind must be; since it is an icon, it must There is a path to introduce it. First of all, we first thought of the img tag. Since it is both text and icon, the only thing we can think of is the @font-facecss3 attribute.

4. What is iconfont? Summary of iconfont instance usage in css-Use of vector icon font

Using icon font to generate icons has the following advantages over image-based icons:
1.) Freely change the size
2.) Freely modify the color
3.) Add a shadow effect
4.) IE6 can also support
5.) Support other attributes of picture icons, such as , transparency and rotation, etc.
6.) You can add attributes such as text-stroke and background-clip:text, as long as the browser supports

5. IconFont (IconFont) production

Icon fonts (IconFont) are now more and more widely used, greatly improving the diversity of web pages and solving the problem of retinal screen distortion. It is said that this private method (@font-face) was supported by Microsoft starting from IE4. Later, W3 also introduced this method in CSS2, but it was later deleted in CSS2.1, which is really a pity. Until CSS3, when it was introduced again, it was really good news.

Related Questions and Answers

1. Using Alibaba What is iconfont? Summary of iconfont instance usage in css does not display in WeChat on Android but displays on ios

2. Expand Alibaba’s What is iconfont? Summary of iconfont instance usage in css font library in the local project and add icon fonts

3. What is iconfont? Summary of iconfont instance usage in css icon production issues

[Related recommendations]

1. PHP Chinese website free tutorial: "CSS Online Manual"

2. PHP Chinese website free video tutorial: "php.cn Dugu Jiujian ( 2)-css video tutorial》

The above is the detailed content of What is iconfont? Summary of iconfont instance usage in css. For more information, please follow other related articles on the PHP Chinese website!