Use fonts to draw icons on web pages

The first step is to download. Select the font icon from the IcoMoon website and download it. After unzipping, place the fonts folder in the project directory. There are four formats of font files in the fonts folder:

Note: Since browsers have inconsistent support for each font, in order to display font icons in all browsers, these font files must be introduced at the same time.

The second step is to use @font-face rules. Customize fonts in style files

<code class="language-css hljs" style="border: 0; border-radius: 4px; font-size: 90%; background-color: #d6dbdf; color: black; display: block; overflow-x: auto; background: white; -webkit-text-size-adjust: none; padding: 0.5em;"><span class="hljs-at_rule">@<span class="hljs-keyword" style="color: #00f;">font-face</span></span><span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">font-family</span>:<span class="hljs-value" style="color: #a31515;"><span class="hljs-string" style="color: #a31515;">'imooc-icon'</span></span></span>;<span class="hljs-comment" style="color: #008000;">/*自己取的名称*/</span>
    <span class="hljs-rule"><span class="hljs-attribute">src</span>:<span class="hljs-value" style="color: #a31515;"><span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.eot"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"embedded-opentype"</span>),<span class="hljs-comment" style="color: #008000;">/*后缀为eot,format对应的字符串*/</span>
            <span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.ttf"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"truetype"</span>),
            <span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.woff"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"woff"</span>),
            <span class="hljs-function">url</span>(<span class="hljs-string" style="color: #a31515;">"fonts/icomoon.svg"</span>) <span class="hljs-function">format</span>(<span class="hljs-string" style="color: #a31515;">"svg"</span>)</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value" style="color: #a31515;">normal</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-style</span>:<span class="hljs-value" style="color: #a31515;">normal</span></span>;
}</span>
</code>

The third step is to display the font icon. For example, if you want to display a font icon on a span tag, first open the decompressed font folder downloaded before, click demo.html inside, and obtain the icon encoding.

Write &#x icon code in the span tag; as shown on the right:
And set the font of the span tag to our custom font name in the style.

Finally, optimized and compatible. In order to be compatible with IE, the @font-face rules have been improved.

In order to obtain better display effects, some more code needs to be added to the span style.

Next, let’s introduce the second way to use font icons.
Use the name of the font icon as the class name and add this class name on the corresponding label. The code snippet is as follows:

<code class="language-cs hljs" style="border: 0; border-radius: 4px; font-size: 90%; background-color: #d6dbdf; color: black; display: block; overflow-x: auto; background: white; -webkit-text-size-adjust: none; padding: 0.5em;">.icon-film:before{
    content:<span class="hljs-string" style="color: #a31515;">'\e913'</span>;<span class="hljs-comment" style="color: #008000;">/*注意这里用的是反斜线*/</span>
}
<span <span class="hljs-keyword" style="color: #00f;">class</span>=<span class="hljs-string" style="color: #a31515;">"icon-film"</span>>&<span class="hljs-preprocessor" style="color: #2b91af;">#xe910;</span></span>
</code>

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

Reference material: MOOC-Use fonts to draw icons on web pages