Use a font to draw an Icon in a webpage, and use a font to draw an icon.

Use a font to draw an Icon in a webpage, and use a font to draw an icon.

Step 1: download. On the IcoMoon website, select the font icon and download it. decompress the package and place the fonts folder under the project directory. The fonts folder contains four types of font files:
Note: Because the browser supports different types of fonts, to display the font icons in all browsers, you must introduce these font files at the same time.

Step 2: Use the @ font-face rule. Customize fonts in style files

@ Font-face {font-family: 'imooc-icon ';/* name */src: url ("fonts/icomoon. eot ") format (" embedded-opentype "),/* Suffix: eot, format String */url (" fonts/icomoon. ttf ") format (" truetype "), url (" fonts/icomoon. woff ") format (" woff "), url (" fonts/icomoon. svg ") format (" svg "); font-weight: normal; font-style: normal ;}

Step 3: display the font icon. Click demo.html to get the icon code.
Finally, it is optimized and compatible. To ensure compatibility with IE, the @ font-face rule is improved.
Next, we will introduce the second method to use the font icon.
Use the font icon name as the class name and add the class name to the corresponding label. The code snippet is as follows:

. Icon-film: before {content: '\ e913';/* Note that the backslash is used here */} <span class = "icon-film"> </span>

Note: When downloading the font icon, you can click the preferences button on the top of the website to set parameters. After downloading, open the css file and provide code for direct use.

Reference: MOOC-use a font to draw an Icon on a webpage