How to use css font icon

In css, after introducing the fonts and style.css files, you can use inline tags to add font icons. The syntax format is "318d41444caf6bb03ca493b586f1bca1". The color and size of the font icon can be modified through the corresponding css; the file is relatively small, which helps the page reduce http requests.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Online generation

Generate through https://icomoon.io/app/#/select this website. Of course there are other similar websites, but this one is really great, great, great, three times.

Import all icons in SVG format, select them all and click GenerateFont to generate the corresponding font icons. Then download all the files that have been packaged.

The page references the corresponding font icon

The directory structure of the downloaded package file is as shown above. We only need to introduce fonts and style.css Just file. The fonts file is as follows, which are: eot compressed font library, integrated svg icon, ttf font, and woff font format.

style.css contains the introduction of the fonts file and the style of the corresponding icon.

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

[class^="icon-"], [class*=" icon-"] {    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;
}

.icon-uniE900:before {
    content: "\e900";
}
.icon-uniE901:before {
    content: "\e901";
}
.icon-uniE902:before {
    content: "\e902";
}
.icon-uniE903:before {
    content: "\e903";
}
.icon-uniE904:before {
    content: "\e904";
}
.icon-uniE905:before {
    content: "\e905";
}

We can modify the above style sheet to achieve the best effect of displaying our own pages.

<span class="icon-uniE901"></span>

What icon is needed? We only need to add the corresponding class to an inline tag (span, i, em).

Summary

It is indeed very convenient to use font icons, and the color and size can be modified through the corresponding css. Moreover, the file is relatively small, which is beneficial to page loading and reduces http requests.

But if a font icon file has been generated and we have new icons to add, then we need to regenerate the corresponding fonts file and modify the css file. The solution is to add all the icons used as much as possible before generating, or use a third-party font icon library.

Recommended learning: css video tutorial

The above is the detailed content of How to use css font icon. For more information, please follow other related articles on the PHP Chinese website!