An overabundance of monochrome icons

Glyph fonts like Font Awesome, Fontelico, Entypo, Typicons contain hundreds of monochrome icons. But the site interfaces use only a few dozen glyphs. By removing the extra glyphs, you will reduce the file size. This will speed up page loading. In the service [fontello.com ](https://fontello.com /) You can make your own set of icons of popular glyph fonts. Glyph font editing is also available in the service [icomoon.io ](https://icomoon.io/app /).

We recommend using more modern practices and transferring icons to a CSS file in the form of data URL images in SVG format. Uploading several tens of kilobytes in a CSS file with icons is faster than making an additional request for a separate file. And it’s easier for a programmer to edit the CSS file code than to use a special service to edit a set of glyph fonts.

Example code that uses fonts with monochrome icons and image data URL:

Demonstration

PHP code

Open a demo Download the example code

<?php
// Получаем список глифов доступных в файле
$data = exec("fc-query --format='%{charset}\\n' fa-regular-400.woff2", $output);
$data = array_pop($output);
$data = explode(' ', $data);
$glyphs = [];
foreach($data as $range) {
    $range = explode('-', $range);
    $range[1] = hexdec($range[1] ?? $range[0]);
    $range[0] = hexdec($range[0]);
    for($i = $range[0]; $i <= $range[1]; $i++) {
        $glyphs[] = $i;
    }
}
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @font-face {
                font-family: 'Roboto';
                src: url('./fa-regular-400.woff2') format('woff2');
                font-style: normal;
                font-weight: 400;
            }
            body {
                font-family: Roboto;
            }
            div {
                border: 1px solid #000;
                margin: 2px;
                padding: 3px;
                border-radius: 3px;
                display: inline-block;
                min-width: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>В шрифте Font Awesome fa-regular-400.woff2 <?=sizeof($glyphs)?> символов</h1>
        <?php foreach($glyphs as $glyph) { ?>
            <div>&#<?=$glyph?>;</div>
        <?php } ?>
    </body>
</html>

Lessons

An overabundance of monochrome icons

PRO subscription for working with the service