Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to make and use css font icons", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to make and use css font icons" this article.

Making and using of css font icon

We often use some icons in the process of project development. But when we use these icons, we often encounter distortion, and if there are a large number of images, the slower the page loads. Therefore, we can use font icons to display icons, which not only solves the problem of distortion, but also solves the problem that pictures take up resources.

How to make font icons

1. Download the required icons on the Internet (svg format). Here we recommend a website "Alibaba icon library", which includes almost all the icons needed in the production of the website, and is downloaded for free (format, size, color can be customized).

Address of Alibaba icon library: https://www.iconfont.cn/

2. Let's open the website "iconmoon" (of course, Alibaba icon library can also be made)

Https://icomoon.io/

Find the red button in the upper right corner and click it

3. Find the upper left corner

This button, click the import icons button, upload your icon in svg format.

4. When the icon is uploaded, the background of the icon is gray. Click on the icon you need (the background will turn white when selected).

Click in the lower right corner of the page

This button, jump to the page, and then click

This download button, wait for the download to complete.

Second, how to use font icons

1. After decompressing the downloaded folder, what we need is the fonts folder and style.css. Put this file into your project. The font file is introduced into the style.css file, so there will be a path. At this time, you should pay attention to the path problem when using it. The code is as follows: (the various font files here are compatible with browsers.)

Font-face {font-family: 'icomoon'; src: url ('.. / fonts/icomoon.eot?snsrp8') Src: url ('.. / fonts/icomoon.eot?snsrp8#iefix') format ('embedded-opentype'), url ('.. / fonts/icomoon.ttf?snsrp8') format ('truetype'), url ('.. / fonts/icomoon.woff?snsrp8') format ('woff'), url ('.. / fonts/icomoon.svg?snsrp8#icomoon') format ('svg'); font-weight: normal; font-style: normal;}

2. On the page, all we have to do is add the corresponding class name to an element, because the icon corresponding to the class name has been written in style.css.

. icon-account:before {content: "\ e900";}. Icon-caifu:before {content: "\ e901";}. Icon-edit:before {content: "\ e902";}

Add similar elements to the page as follows:

In this way, the corresponding icon can be displayed on our page.

Note: some icons may not appear on some Xiaomi phones:

Second: use Ali's iconfont:

1. Find the website and search for the icon you need

2. Add the picture to the shopping cart, click the shopping cart button in the upper right corner of the page, and add all icons to the custom project.

3. In the pop-up page, click download to local.

The above is all the content of the article "how to make and use css font icons". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.