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

Глиф шрифты как 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>

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

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса