Переизбыток монохромных иконок

Глиф шрифты как Font Awesome, Fontelico, Entypo, Typicons содержат сотни монохромных иконок. Но интерфейсы сайтов используют только несколько десятков глифов. Убрав лишние глифы, вы сократите размер файла. Это ускорит загрузку страницы. В сервисе fontello.com вы можете составить свой набор иконок популярных глиф шрифтов. Также редактирование глиф шрифтов доступно в сервисе icomoon.io.

Мы же рекомендуем пользоваться более современными практиками и перенести иконки в CSS файл в виде data URL картинок в формате SVG. Загрузить несколько десятков килобайт в CSS файле с иконками быстрее, чем делать дополнительный запрос для отдельного файла. И программисту редактировать код CSS файла проще, чем пользоваться специальным сервисом для редактирования набора глиф шрифтов.

Пример кода, использующего шрифты с монохромными иконками и data URL изображения:

Демонстрация

PHP код

Открыть демонстрацию Скачать код примера

<?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>

ПРО подписка для работы с сервисом

Подробнее о тарифах