Logo: Icon Font

In addition to letters, the font may contain other graphic symbols. There are tools that allow you to build your own font from SVG objects. There are quite a few of them, including: icomoon.io/app, fontastic.me, glyphter.com, and others.

For the sake of simplicity and clarity, in this task we will use the Glyphter service to create a font with a single character, which will be stored at the address for the Latin letter A.

Then we will load and connect our font in CSS and write the letter A in the code. However, the resulting output in the browser will be our custom icon.

Let’s make this icon the graphic symbol that is used in the logo.

The advantage of font icons over bitmaps is that they can be easily scaled or recolored by applying CSS properties to text. In addition, the font does not pixelate on screens with a high pixel density, which is what would happen if you scaled a standard bitmap image.