Как было описано в нашей предыдущей статье о шрифтах-иконках, шрифты-иконки — это векторные шрифты, содержащие не буквы, а функциональные пиктограммы. Веб-разработчики, использующие иконочные шрифты, получают огромную выгоду от свободно масштабируемых векторов. В отличие от пиксельных шрифтов, векторные шрифты определяются в графических примитивах, таких как линии, круги, многоугольники и кривые, независимо от устройств вывода. Это позволяет легко преобразовывать их без потери данных на основе CSS; таким образом, соответствующие иконки не нужно загружать и настраивать отдельно в графической программе. Вместо этого форматирование выполняется веб-браузером на основе кода. Для этого файл CSS со шрифтами иконок должен быть включен в заголовок HTML. Впоследствии отдельные иконки могут быть интегрированы в веб-страницу с помощью HTML-атрибута «class». Читайте дальше, чтобы узнать, как это работает на примере популярного шрифта с открытым исходным кодом Font Awesome.
Встраивание иконок с помощью Font Awesome
Font Awesome может похвастаться более чем 600 иконками, что делает его одной из самых больших коллекций векторных символов. Пиктографические шрифты доступны бесплатно. Чтобы интегрировать шрифт пиктограмм в веб-страницу, вам просто необходим их установочный комплект. Его можно загрузить с сайта Font Awesome. Вот три шага для интеграции пиктографических шрифтов:
- Скачайте установочный комплект
- Включите таблицу стилей в заголовок нужного HTML-документа: чтобы интегрировать Font Awesome в веб-страницу, HTML-документ должен быть связан с CSS-файлом ‘font-awesome.min.css’ из установочного комплекта. Это делается путем вставки следующего кода в заголовок HTML: <link rel=»stylesheet» href=»https://www.ionos.com/digitalguidepath/to/font-awesome/css/font-awesome.min.css»>Заполнитель «path/to/» представляет собой путь к файлу веб-проекта на сервере.
- Встраивание пиктограмм: когда связь с файлом CSS установлена, вы можете использовать пиктограммы шрифта пиктограмм в любом месте исходного кода HTML. В следующем примере используется пустой i-элемент в сочетании с атрибутом class. Классы образуются из CSS-префикса ‘fa’ и соответствующих имен пиктограмм: <i></i>
Код встраивания каждого значка задокументирован на сайте Font Awesome.
В качестве альтернативы i-элементу вы также можете встроить иконку через семантически пустой тег span.
