Let me teach you how to use font icons in CSS

First of all, what is a font icon? On the surface, it is an icon, but in fact, it is text. We can set font icons just like setting text. Generally, there are two ways to set font icons. One is to introduce CSS files and then set special classes; the other is to set it through the content in the pseudo-element. Let’s take a look at how to set it together!

1: Import the CSS file and set a special class to use the font icon

I used the iconfont official website to conduct experiments. First, I searched for iconfont on Baidu, entered the official website and logged in. After logging in, I created a new project and opened my project first:

Click the New Project icon:

Then enter a project name and click New:

Then you can go to the search box above to search for the icon you want, for example, enter "Tmall", click Enter, then put the mouse on the icon you want, and click the shopping cart icon to add it to the inventory:

Then open the shopping cart icon in the upper right corner, click Add to Project, select your project name and click OK. My project name is "HelloWorld":

After that, you will enter my project, which is the project where you added the icon above. If you want to use it locally, click Download to Local:

After downloading, unzip it and copy all the files in the innermost part of the unzipped file (files ending with css, eot, woff, etc.) to a folder under my project. The folder can be named as you like:

Then introduce the iconfont.css file in the HTML file:

The method used is to first add iconfont to the class of the element where I want to place the icon, and then add the name of the icon, the name is as follows:

If you want to use this name, just move it to the icon and click Copy Code in the pop-up box:

Then you can use it directly:

Among them, iconfont is required, and the following is the name after we copied the code above

If you don't want to download it locally, you can also use the online css file. First, we find the interface of the above project in the iconfont official website, first click "Font class", then click "No code, click here to generate", then we can see a link:

Then we don't need to download the file, nor do we need to import related files. We only need to introduce the css file in the HTML code that uses the icon:

After that, you can use it directly. The class still needs to contain iconfont, and then you need to include the name of the icon as the class. The icon name is still obtained by "copying the code":

Then you can just write:

2. Set it through the content in the pseudo element

The above steps can be used to add icons to the project. Since the above introduction method has been described, we will describe it here. Assuming that we have already introduced the icon into the project, we can still download the project to the local computer first. This has been mentioned in the previous method, so I will not describe it here. Then copy the files ending with eot, woff2, woff, ttf, and svg, and then assign these files to a file in our project:

Then import these files into the css file as follows:

@font-face {
	font-family: 'iconfont';
	src: url('../fonts/iconfont.eot');
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/iconfont.woff2') format('woff2'),
	url('../fonts/iconfont.woff') format('woff'), /* Modern Browsers */
	url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */
	url('../fonts/iconfont.svg#iconfont') format('svg'); /* Legacy iOS */
}

The above font-family is defined by ourselves. We need to introduce these files in the url. The single quotes in url() are the url addresses of these files relative to these css files. #iefix and #iconfont are indispensable. #iefix is ​​fixed, and the name in #iconfont is the name in font-family . They need to be added after the corresponding file name. The content in format() cannot be changed. You can copy the above content to your own, and only change the corresponding url address according to the suffix name. Don't change it randomly or you will make mistakes. Since we will use the icons in it many times, we need to put some attributes in a public class, as shown below:

[class^="icon-"],
[class*="icon-"] {
	font-family: 'iconfont';
	font-style: normal;
}

This means that as long as the class contains icon- there will be font-family and font-style attributes. The name of font-family is the name of font-family in @font-face . If we need to use the class attribute, then add a name starting with icon- to the class of the element in the htm file, as shown below:

After that, we can set the corresponding icon, usually using pseudo elements, which can be set in CSS like this:

As for the content inside, the front \ is fixed, and the back e799 comes from here. We go back to the iconfont official website, find the icon in our project, stay on it, and click the edit icon:

Copy the content below "Unicode (hexadecimal)":

That's it!

If you don't want to download it locally, you can also use online Unicode encoding. First, we find the interface of the above project in the iconfont official website, click "Unicode", and then click "No code, click here to generate", then we can see a link:

Copy the link content, so that we don't need to copy the file into the project, just put the above link content into the css file:

@font-face {
  font-family: 'iconfont'; /* project id 2074612 */
  src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot');
  src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') format('woff'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') format('svg');
}

Then write in css:

[class^="icon-"],
[class*="icon-"] {
	font-family: 'iconfont';
	font-style: normal;
}

After that, you need to write down what the content in content is. It is explained in detail above and will not be repeated here:

.icon-tianmao::before {
	content: '\e799';
}

Then it is also necessary in the HTML file. These are explained in detail in the second method, so I will not go into details here:

<i class="icon-tianmao"></i>

This is the end of the article about how to use font icons in CSS. For more relevant CSS font icon content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!