The presence of a monochrome font

Monochrome small pictures are ubiquitously used in interfaces. It is better to save these icons in CSS as data URL strings in SVG format, instead of fonts. Firstly, you speed up page loading, as you reduce the number of requests by 1. Secondly, the CSS file is edited as plain text, and a special service or program is needed to edit the font glyph. This saves the programmer time. Using SVG, you can add a drawing of any complexity to the page. Glyph fonts have limited capabilities in terms of graphics.

You can convert SVG to CSS in the service [https://bloggerpilot.com/en/tools/svg-to-css /](https://bloggerpilot.com/en/tools/svg-to-css /).

Compare the appearance and source code when using glyph fonts and data URL SVG images:

Demonstration

HTML code

Open a demo Download the example code

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @font-face {
                font-family: 'icomoon';
                src:  url('icomoon.ttf?nf6jl1') format('truetype');
                font-weight: normal;
                font-style: normal;
                font-display: block;
            }

            [class^="icon-"], [class*=" icon-"] {
                /* use !important to prevent issues with browser extensions that change fonts */
                font-family: 'icomoon' !important;
                speak: never;
                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-droplet:before {
                content: "\e90b";
            }
            .icon-phone:before {
                content: "\e942";
            }
            .icon-clock:before {
                content: "\e94e";
            }
            [class^="svg-"],
            [class*=" svg-"] {
                width: 40px;
                height: 40px;
            }
            .svg-envelope {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 1H5a5.006 5.006 0 0 0-5 5v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5V6a5.006 5.006 0 0 0-5-5ZM5 3h14a3 3 0 0 1 2.78 1.887l-7.658 7.659a3.007 3.007 0 0 1-4.244 0L2.22 4.887A3 3 0 0 1 5 3Zm14 18H5a3 3 0 0 1-3-3V7.5l6.464 6.46a5.007 5.007 0 0 0 7.072 0L22 7.5V18a3 3 0 0 1-3 3Z'/%3E%3C/svg%3E");
            }
            .svg-user {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a6 6 0 1 0-6-6 6.006 6.006 0 0 0 6 6Zm0-10a4 4 0 1 1-4 4 4 4 0 0 1 4-4ZM12 14a9.01 9.01 0 0 0-9 9 1 1 0 0 0 2 0 7 7 0 0 1 14 0 1 1 0 0 0 2 0 9.01 9.01 0 0 0-9-9Z'/%3E%3C/svg%3E");
            }
            .svg-search {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m23.707 22.293-5.969-5.969a10.016 10.016 0 1 0-1.414 1.414l5.969 5.969a1 1 0 0 0 1.414-1.414ZM10 18a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8Z'/%3E%3C/svg%3E");
            }
        </style>
    </head>
    <body style="font-family: sans-serif;">
        <p>Кнопки глиф шрифта.</p>
        <div class="icon-droplet"></div>
        <div class="icon-phone"></div>
        <div class="icon-clock"></div>
        <p>Data URL кнопки.</p>
        <div class="svg-envelope"></div>
        <div class="svg-user"></div>
        <div class="svg-search"></div>
    </body>
</html>

Any comments or additions? Send us an email admin@site-alarm.com or in telegram channel.

Check your website