Home > Web Front-end > CSS Tutorial > An in-depth explanation of the production and use of css font icons (code sharing)

An in-depth explanation of the production and use of css font icons (code sharing)

奋力向前
Release: 2021-09-16 09:56:36
forward
2542 people have browsed it

In the previous article "An article explaining common techniques for making animations with CSS (Collection)", we learned about the common techniques for making animations with CSS. The following article will help you understand the production and use of CSS font icons. Friends, come and take a look.

An in-depth explanation of the production and use of css font icons (code sharing)

The production and use of css font icons

In the process of project development, we will often use some icons. But when we use these icons, we often encounter distortion, and the more pictures there are, 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 of images taking up resources.

1. How to make font icons

1. Download the required icons from the Internet (svg format). Here we recommend a website "Alibaba "Icon Library" contains almost all the icons needed for website production, and is free to download (the format, size, and color can all be customized).

The address of Alibaba icon library: https://www.iconfont.cn/

2. Let’s open the website “iconmoon” (Of course, the Alibaba icon library website can also make it)

https://icomoon.io/

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

An in-depth explanation of the production and use of css font icons (code sharing)

3. Find the An in-depth explanation of the production and use of css font icons (code sharing) button in the upper left corner, click the import icons button, and upload your svg format icon.

4. After the icon is uploaded, the background of the icon is gray. At this time, click on the icon you need (the selected background will turn white).

An in-depth explanation of the production and use of css font icons (code sharing)

5. Click the

An in-depth explanation of the production and use of css font icons (code sharing)

button in the lower right corner of the page. After jumping to the page, click

An in-depth explanation of the production and use of css font icons (code sharing)

This download button, wait for the download to complete.

2. How to use font icons

1. Unzip the downloaded folder. What we need is the fonts folder and style.css, put this file into your project. The font file is introduced in 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 multiple font files here are for browser compatibility)

@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;
}
Copy after login

2. In the page, we only need to add the corresponding class name to an element, because in style.css# The icon corresponding to the class name has been written in ##.

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

Add the following similar elements to the page:

<span class="icon-account"></span>
Copy after login
In this way, the corresponding icon can be displayed on our page.

Note: Some icons may not be displayed on some Xiaomi phones:

An in-depth explanation of the production and use of css font icons (code sharing)

2: Use Alibaba’s iconfont:

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

2. Add the image 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.

Recommended learning:

CSS video tutorial

The above is the detailed content of An in-depth explanation of the production and use of css font icons (code sharing). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.im
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template