Начало работы с Font Awesome Font Awesome CDN
Супер легко CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.
Для чего нужен ваш email?
или
Расширенная кастомизация
Легко Хотите управлять и размещать файлы Font Awesome сами? Вы можете
скачать,
кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.
Скачать
Использование Sass или Less Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.
Скопируйте полностью папку font-awesome в папку вашего проекта. В вашем проекте откройте файлы font-awesome/less/variables. или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.@fa-font-path: "../font";
Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.
Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать. Посмотрите примеры для начала работы с Font Awesome! или
Продвинутый уровень
Профи Sass Ruby Gem Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS
в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.
Добавьте нижеуказанную строку в Gemfile вашего проекта:gem 'font-awesome-sass'
Далее запустите:$ bundle
Или установите вручную:$ gem install font-awesome-sass
Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.:
@import "font-awesome-sprockets";
@import "font-awesome";
Дополнительная информация Валидаторы Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.
На практике эти предупреждения валидатора не имеют значения, так как большая часть CSS работает без хаков и, соответственно, они не принимают участие в работе тех участков, где они не используются. Собственно, поэтому мы и игнорируем эти предупреждения.
Гайд по валидаторам от Bootstrap Team под лицензией CC BY 3.0
Internet Explorer 8 и @font-face IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before.
Гайд по использованию @font-face в Internet Explorer 8 от Bootstrap Team под лицензией CC BY 3.0
Необходима поддержка IE7 ? Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0
не поддерживает IE7и версии ниже. Вам необходимо прочитать
инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .
Решение ошибок Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на
wiki -странице по частым ошибкам.
Занимается поддержкой: @gtagliala.
Font Awesome 5 доступен! Font Awesome 5 или
Спасибо, просто скачать
Font Awesome 4
Иконочные шрифты, альтернативы FontAwesome Веб-разработка
14.04.2020
Что такое «Иконочный шрифт» — это обычный шрифт, но вместо букв и цифр в нем отображаются различные пиктограммы и символы. В последние годы такие шрифты активно используют в веб-дизайне, в качестве иконок для сайта. С их помощью можно улучшить юзабилити сайта, упростить восприятие информации. Еще из плюсов использования иконочных шрифтов по сравнению с иконками-картинками:
Возможность масштабирования без потери качества Беспроблемная поддержка в большинстве браузеров Возможность стилизации, работа как с обычным текстом Небольшой вес Всего за один запрос на сервер загружаются все необходимые иконки Кроме использования для сайтов, такие шрифты можно установить и в свою ОС и использовать в программах, например в Фотошопе.
Самый популярный иконочный шрифт FontAwesome https://fontawesome.com/, но поскольку информации о нем и так полно, мы лучше рассмотрим альтернативные шрифты.
Этот шрифт в качестве иконок содержит логотипы различных интернет и ИТ брендов.
Шрифт поставляется с CSS, поэтому у вас есть возможность его кастомизации. Иконки шрифта можно использовать без фона или с фоном сделав из квадратными, с закругленными концами и просто круглыми.
Вы можете использовать цветные иконки, которые повторяют реальные цвета бренда.
Лицензия: SIL Open Font and MIT
Twemoji — это open source проект смайликов от Twitter. Канадский дизайнер Elle Kasai создала на его основе иконочный штифт Twemoji Awesome.
Все имена классов для отображения иконок такие же, как в шпаргалке по Twemoji (https://www.webfx.com/tools/emoji-cheat-sheet/), но вам нужно использовать тире (-) вместо подчеркивания (_), вот и все.
Лицензия: MIT and CC-BY for the Emoticon graphics
Octicons — это иконочный шрифт от GitHub.
Лицензия: MIT
Этот шрифт включает в себя 250 иконок в 5 различных размерах и 14 цветах.
Лицензия: Attribution-ShareAlike 4.0 International
DevIcons — это иконочный шрифт разработанный Теодором Ворильясом. Он содержит 85 символов и логотипов знакомых приложений для разработки, таких как GitHub, Laravel, Django, Visual Studio и многих других.
Лицензия: MIT
В этом шрифте содержится множество иконок, вдохновленных дизайном Google Material и сгруппированных в 15 различных категорий. Чтобы использовать их, нужно просто подключить файл шрифта Material-Design-Iconic-Font.ttf к сайту, а потом используя эту шпаргалку добавить иконки на сайт. Так же можно изменять размеры, цвета и вообще работать с ними как с обычным шрифтом с помощью CSS.
Лицензия: Attribution-ShareAlike 4.0 International
font
Icon Fonts против SVG Icons: что лучше для вас? РазметкаВеб-дизайнВеб-разработка
Современные веб-страницы невозможно представить без иконок.
Современные веб-страницы трудно представить без этих крошечных, но полезных элементов — иконок. Вы обязательно найдете их в навигационных меню, контактных данных, описаниях продуктов и т. д. Как неотъемлемая часть дизайна пользовательского интерфейса, значки также могут представлять собой проблему для разработчиков.
Острые дебаты о шрифтах-значках и шрифтах SVG ведутся уже некоторое время. Теперь мы рассмотрим, что такое иконочные шрифты и значки SVG, как их можно использовать и какой метод следует предпочесть в конкретных ситуациях.
Что такое иконочные шрифты? Иконочные шрифты, как следует из названия, представляют собой шрифты, содержащие значки вместо букв и цифр.
Иконочные шрифты были де-факто методом добавления векторных значков на веб-сайты до начала 2020 года, когда реальная поддержка SVG в различных браузерах стала стабильной.
Почему иконочные шрифты стали популярны? Во-первых, каждый символ в иконочных шрифтах является масштабируемым. В основном, вы можете настраивать значки с помощью CSS, изменяя их размер, цвет и форму. Вам нужно только создать соответствующие классы в вашем CSS.
Во-вторых, возможность указать на файл шрифта позволяет разработчикам использовать любой шрифт по своему желанию, не беспокоясь о том, безопасен ли он для Интернета. Браузеры запрашивают указанный файл и показывают значок.
В-третьих, иконочные шрифты небольшого размера, поэтому загружаются достаточно быстро.
Хотя иконочные шрифты имеют ряд существенных преимуществ, мы не должны игнорировать их недостатки.
Причины, по которым следует избегать использования шрифтов значков Во-первых, мы упомянули масштабируемость шрифтов значков. Действительно, при необходимости можно изменить цвет шрифта и добавить к нему тень. Однако помните, что к таким значкам можно применить только один цвет. Быть монохромным и иметь ограничения по стилю — один из минусов, который значки шрифтов могут представлять для дизайнеров/разработчиков.
Что касается размера, дизайн иконочных шрифтов предполагает определенную сетку, такую как 16×16, 32×32, 48×48 и т. д. Изменение сетки может привести к потере качества иконки.
Хотя вы можете настроить шрифты значков для различных размеров области просмотра, вы также должны помнить о том, чтобы поместить их в классы aria, чтобы сделать их доступными для браузеров.
Еще одна проблема, которая может возникнуть со значками шрифтов, — это мигание нестилизованного содержимого (FOUC). Чтобы использовать иконочные шрифты, вы должны применить правило @font-face, которое предписывает браузерам выполнять HTTP-запрос для файла шрифта.
При обработке HTML и связанных с ним файлов браузер строит объектную модель документа (DOM) в режиме реального времени. В зависимости от размера файла шрифта, сетевых условий и оборудования пользователя извлечение шрифта может занять некоторое время.
Пока браузер не сможет получить доступ к активу шрифта, он может отображать текстовое содержимое HTML до его полного получения, что приводит к FOUC. Таким образом, есть шанс, что до полной загрузки шрифта вместо значков будут отображаться случайные глифы или символы. Такие вспышки могут раздражать и негативно влиять на работу пользователей.
Более того, файлы иконочных шрифтов обычно содержат множество элементов, многие из которых вы, вероятно, не будете использовать. Тем не менее, файл будет занимать место.
Что такое иконки SVG? Файл SVG (масштабируемый векторный формат), как следует из названия, представляет собой формат изображения для векторной графики с возможностью масштабирования. Файлы SVG используют язык разметки на основе XML для описания векторной графики.
Внедрение значков SVG Существуют различные способы добавления SVG на веб-сайты. Вы можете реализовать иконки SVG либо внешне, в виде изображения с тегом
Внешние значки SVG Для отображения значка SVG следует использовать HTML-элемент
Встроенные иконки SVG Встроенные SVG будут выглядеть так:
Этот конкретный тип добавления SVG не увеличивает запросы к серверу и, следовательно, не влияет отрицательно на производительность веб-сайта.
Преимущества использования значков SVG Давайте рассмотрим основные преимущества использования SVG на веб-страницах.
Масштабируемость В отличие от изображений PNG или JPEG, значки SVG масштабируются, поэтому ваша веб-страница не будет страдать от потери качества, когда посетители используют различные устройства для ее просмотра.
Более того, поскольку браузеры обрабатывают SVG как изображения, для SVG не существует правил сглаживания. Иконочные шрифты, напротив, уязвимы для этих приемов и могут выглядеть размытыми. Вы можете быть уверены, что визуальное качество SVG будет идеальным во всех разрешениях.
Параметры настройки SVG более гибкие, чем шрифты значков. Во-первых, вы можете добавить больше цветов с помощью SVG. В отличие от одноцветных шрифтов значков, значки SVG допускают градиенты. Кроме того, вы можете анимировать отдельные штрихи в значках SVG.
Позиционирование значков Позиционирование шрифта SVG по сравнению со шрифтом значка проще с помощью SVG. Чтобы разместить значок шрифта, вам может потребоваться настроить различные свойства, такие как расстояние между словами и буквами, выравнивание, высота строки или размер шрифта.
Меньше запросов к серверу Как мы уже говорили, при указании иконочного шрифта в CSS с правилом @font-face необходимо указать URL, по которому этот шрифт можно найти. Таким образом, использование правила @font-face означает указание браузеру запрашивать файл шрифта.
При использовании SVG сканеру не нужно отправлять запросы на сервер для отображения значка.
Оптимизация SEO Поисковые системы могут сканировать и индексировать файлы SVG. Встроенные семантические элементы, такие как
и <desc>, делают эти файлы более доступными, чем иконочные шрифты. Это означает, что сканеры лучше поймут, о чем ваша страница.</p><p> Кроме того, элементы <alt> будут полезны, если некоторые сканеры экрана не могут правильно обрабатывать значки. Таким образом, проблемы доступности будут решены за счет отображения альтернативного имени посетителям.</p><h3><span class="ez-toc-section" id="_SVG-6"> Создание и настройка кодов SVG </span></h3><p> Последние версии программ для рисования, таких как Inkscape, Illustrator и Sketch, создают довольно чистые SVG.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/reinvently.com/wp-content/uploads/2016/07/social_icons-freebie.jpg' /><noscript><img loading='lazy' src='/800/600/https/reinvently.com/wp-content/uploads/2016/07/social_icons-freebie.jpg' /></noscript><div class="advv"> <ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="7683656859"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div> Затем вы можете использовать любой текстовый редактор для настройки кода SVG. Кроме того, вам могут помочь многочисленные онлайн-ресурсы.</p><p> Вот список служб значков, которые имеют параметры SVG:</p><ul><li> Приложение IcoMoon </li><li> Иконки дизайна материалов</li><li> Иконки | Шрифт потрясающий</li><li> Бесплатные иконки</li><li> Наборы значков</li></ul><p> С помощью этих сервисов вы можете найти нужную иконку.</p><p> В некоторых случаях вы также можете бесплатно настроить размер и цвет. Сделав необходимые настройки, следует скопировать код или скачать SVG.</p><center><ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5948177564140711"
data-ad-slot="2646898692"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><h4><span class="ez-toc-section" id="i-13"> Настройка кода </span></h4><p> После копирования кода настоятельно рекомендуем проверить его, сохранить обязательные элементы и удалить лишние. Это приведет к чистому коду и меньшему размеру файла. Давайте посмотрим на некоторые примеры.</p><p> С иконками Material Design вы получите такой код:</p><pre lang="xml"> <svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20,8L12,13L4,8V6L12,11L20,6M20,4h5C2.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Webdings-big.png/440px-Webdings-big.png' /><noscript><img loading='lazy' src='/800/600/https/upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Webdings-big.png/440px-Webdings-big.png' /></noscript> 89,4 2,4.89 2,6V18A2,2 0 0,0 4,20х30A2,2 0 0,0 22, 18V6C22,4,89 21,1,4 20,4Z" />
</svg> </pre><p> Как показано на скриншоте, вы можете скачать файл SVG или просто скопировать код.</p><p> Код FontAwesome выглядит иначе:</p><pre lang="xml"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 128C0 92,65 28,65 64 64 64х548С483,3 64 512 92,65 512 128В384С512 419,3 483,3 448 448 448Х64С28,65 448 0 419,3 0 384В128зМ48 128 V150.1L220.5 291.7C241.1 308,7 270,9 308,7 291,5 291.7L464 150.1V127.1C464 119,2 456,8 111,1 448 111.1H64C55. 16 111,1 48 119,2 48 127.1L48 128zM48 212.2V384C48 392,8 55,16 400 64 400х548C456,8 400 464 392,8 464 384V212.2L322 328,8 C283.6 360.3 228.4 360.3 189.1 328.8L48 212.2z"/></svg> </pre><p> Как видите, этот код содержит учетные данные — ссылку на сайт FontAwesome.Есть и другие элементы, которые вы можете найти в кодах SVG.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/tBR6A.png' /><noscript><img loading='lazy' src='/800/600/https/i.stack.imgur.com/tBR6A.png' /></noscript></p><h5><span class="ez-toc-section" id="_ID"> Атрибут ID </span></h5><p> Некоторые программы, такие как Illustrator, добавляют атрибут ID. Если вы используете CSS и JavaScript, этот атрибут будет полезен. В противном случае его можно безопасно удалить.</p><h5><span class="ez-toc-section" id="_x_y"> Атрибуты x и y </span></h5><p> В кодах Illustrator вы также можете найти <strong> <em> x=”0px” y=”0px” </em> </strong> фрагмент кода. Вы также можете удалить эти атрибуты.</p><h5><span class="ez-toc-section" id="_xmlspacepreserve"> Включить фон и атрибуты xml:space=»preserve» </span></h5><p> Поскольку браузеры не поддерживают эти атрибуты, их можно не включать.</p><p> Несколько онлайн-инструментов могут помочь удалить ненужное кодирование:</p><ul><li> SVGOMG — Отсутствующий графический интерфейс SVGO — это сервис для оптимизации значков один за другим;</li><li> svgoptimizer — это инструмент, который помогает оптимизировать сразу несколько иконок.</li></ul><h3><span class="ez-toc-section" id="i-14"> Подводя итоги </span></h3><p> Сравнение шрифтов Icon и SVG показывает, что SVG более надежны, масштабируемы и быстрее отображаются. Вот почему SVG становятся новым стандартом веб-иконок и рекомендацией W3C.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cdn.onlinewebfonts.com/svg/download_51652.png' /><noscript><img loading='lazy' src='/800/600/https/cdn.onlinewebfonts.com/svg/download_51652.png' /></noscript></p><p> Вот несколько советов по выбору значков.</p><ol><li> Если вам нужно много значков без особых изменений стиля, шрифты значков могут вам подойти. Для настройки и анимации лучше использовать SVG. Это особенно актуально, если вам требуется полный контроль над цветами, плавными переходами и анимацией различных частей значков.</li><li> Вы можете использовать встроенные SVG, если нет множества значков, которые должны отображаться на одной странице.</li><li> Встроенные SVG добавляют код в ваши файлы, поэтому, если вы не возражаете, не стесняйтесь их использовать.</li> Иконки<li> SVG будут отлично смотреться как на обычных дисплеях, так и на дисплеях Retina. Если этот фактор важен, вам следует предпочесть встроенные SVG значкам шрифтов.</li><li> Поддержка специальных возможностей лучше с помощью значков SVG. Итак, если доступность для вас обязательна, выбирайте встроенные SVG.</li></ol><hr/><h3><span class="ez-toc-section" id="_-_GetDevDone"> Превосходные услуги веб-разработки от GetDevDone </span></h3><p> Компания GetDevDone уже почти 17 лет находится в авангарде индустрии веб-разработки.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/dt.azadicdn.com/wp-content/uploads/2011/01/2011-01-04_142751.png?200' /><noscript><img loading='lazy' src='/800/600/https/dt.azadicdn.com/wp-content/uploads/2011/01/2011-01-04_142751.png?200' /></noscript></p><p> Мы обеспечиваем разработку на основе CMS (HubSpot, Drupal, WordPress), разработку внешнего интерфейса с использованием передовых фреймворков и библиотек JavaScript (Vue, React, Angular), а также безупречный до пикселя адаптивный дизайн для преобразования HTML/CSS. Мы также создаем шаблоны электронной почты и потрясающие баннеры HTML5, создаем интернет-магазины на основе популярных платформ электронной коммерции (WooCommerce, Shopify, Magento) и предлагаем другие высококачественные услуги.</p><p> Свяжитесь с нами, чтобы обсудить потребности вашего бизнеса!</p><h5><span class="ez-toc-section" id="i-15"> Алекс Копп </span></h5><p> Алекс Копп — менеджер по развитию бизнеса в P2H, основной миссией которого является помощь организациям в преодолении препятствий веб-разработки. Один из способов, которым он это делает, — писать привлекательные и ценные посты. Подпишитесь на него в LinkedIn</p><h2><span class="ez-toc-section" id="Icon_Fonts_SVG"> Icon Fonts против SVG — какой из них использовать? </span></h2><p> Коди Арсено</p><p> Обновлено 10 марта 2023 г.</p><p> Если вы создаете веб-сайт или приложение и задаетесь вопросом, использовать ли иконочные шрифты или SVG, вы пришли в нужное место.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/ax2zS7U9WBU/maxresdefault.jpg' /><noscript><img loading='lazy' src='/800/600/https/i.ytimg.com/vi/ax2zS7U9WBU/maxresdefault.jpg' /></noscript> В этой статье мы рассмотрим плюсы и минусы каждого варианта и поможем вам решить, какой из них лучше всего подходит для вашего проекта.</p><p> Графические значки являются важным компонентом почти каждого веб-сайта или приложения. Хотя значки обычно имеют небольшой размер по своей природе, выбор формата для веб-значков — нетривиальное решение. Помимо стандартных форматов изображений, у веб-разработчиков есть два основных варианта: SVG или иконочные шрифты. Какой из них вы должны использовать? Давайте посмотрим, как эти два формата сравниваются с точки зрения производительности, гибкости и доступности.</p><h3><span class="ez-toc-section" id="i-16"> Эволюция веб-иконок </span></h3><p> Веб-иконки прошли долгий путь с момента появления Интернета. До появления CSS веб-иконки должны были быть изображениями. Поскольку файлы изображений имеют большой размер, веб-разработчики всегда пытались найти альтернативные методы отображения маленьких значков.</p><p> В начале 2000-х значки часто представляли собой простую пиксельную графику, которая использовалась в основном для навигации и обозначения ссылок.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/okeygeek.ru/wp-content/uploads/2018/10/kisspng-computer-icons-font-family-font-font-style-5ae193744d7530.0805736115247327883173.png' /><noscript><img loading='lazy' src='/800/600/https/okeygeek.ru/wp-content/uploads/2018/10/kisspng-computer-icons-font-family-font-font-style-5ae193744d7530.0805736115247327883173.png' /></noscript> По мере развития веб-дизайна менялось использование и дизайн иконок.</p><p> Одним из первых крупных изменений в эволюции веб-иконок стало введение иконочных шрифтов. Иконочные шрифты были впервые представлены в 2010 году и быстро завоевали популярность как способ легко встраивать значки в веб-дизайн. Они предложили легкую и масштабируемую альтернативу использованию изображений для значков.</p><p> Поскольку веб-дизайн продолжал развиваться, использование SVG (масштабируемой векторной графики) стало более распространенным. SVG обеспечивают большую гибкость дизайна и могут быть легко масштабированы без потери качества. Это сделало их популярным выбором для создания пользовательских значков и графики.</p><p> Внедрение плоского дизайна в середине 2010-х годов также оказало значительное влияние на эволюцию веб-иконок. Плоский дизайн подчеркивал простоту и минимализм с упором на использование простых форм и смелых цветов. Это привело к широкому использованию простых, минималистичных иконок, которые были легко узнаваемы и визуально привлекательны.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/img2.freepng.ru/20180501/qae/kisspng-computer-icons-web-typography-font-awesome-font-social-vector-5ae8862e1faa41.3734177015251881421297.jpg' /><noscript><img loading='lazy' src='/800/600/https/img2.freepng.ru/20180501/qae/kisspng-computer-icons-web-typography-font-awesome-font-social-vector-5ae8862e1faa41.3734177015251881421297.jpg' /></noscript></p><p> В последнее время тенденция к использованию анимированных иконок стала более распространенной. Анимированные значки могут добавить элемент интерактивности и вовлеченности в веб-дизайн, что делает их популярным выбором для веб-сайтов и приложений.
Еще одно недавнее развитие веб-иконок — использование 3D-графики и изометрического дизайна. Эти стили добавляют глубину и размер значкам, делая их визуально более интересными и привлекательными.</p><h3><span class="ez-toc-section" id="i-17"> Что такое иконочные шрифты? </span></h3><p> Иконочные шрифты — это текстовые файлы, которые можно изменять с помощью CSS. Следовательно, они масштабируются намного лучше, чем растровые изображения, поэтому изменение размера иконочного шрифта не ухудшает его визуальное качество. Изменить цвет или добавить тень так же просто, как и отредактировать текст. Вы можете легко найти бесплатные иконочные шрифты для использования на своем веб-сайте или создать свой собственный. Одним из недостатков использования иконочных шрифтов является то, что большинство наборов шрифтов содержат значки, которые вы, вероятно, не будете использовать, поэтому их будет всего 9.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/banner2.cleanpng.com/20180515/wtq/kisspng-computer-icons-font-awesome-font-5afb0b52790ab2.6931593515264018744958.jpg' /><noscript><img loading='lazy' src='/800/600/https/banner2.cleanpng.com/20180515/wtq/kisspng-computer-icons-font-awesome-font-5afb0b52790ab2.6931593515264018744958.jpg' /></noscript> 0139 занимает место </strong>.</p><p> Как и CSS-спрайты до них, иконочные шрифты начинают терять популярность у разработчиков. Для правильного отображения шрифтов значков часто требуется, чтобы браузер делал дополнительные запросы к серверу, что может привести к FOIT или миганию невидимого текста на значках, пока библиотеки шрифтов все еще загружаются. Если браузер не может интерпретировать шрифты, пользователь просто увидит пустые символы. Поскольку такие сценарии неприемлемы для профессиональных веб-сайтов, все больше разработчиков обращаются к SVG.</p><h3><span class="ez-toc-section" id="_SVG-7"> Что такое SVG? </span></h3><p> SVG (масштабируемая векторная графика) позволяют отображать векторную графику в браузере. SVG быстро становятся новым стандартом для веб-иконок и анимации. Они не только обеспечивают превосходное масштабирование, но и часто рендерятся быстрее и надежнее, чем иконочные шрифты. Поскольку векторная графика полностью состоит из кода, ее не нужно импортировать из больших внешних файлов. Кроме того, они намного меньше по размеру, чем типичные файлы JPG или PNG, а также большинство библиотек иконочных шрифтов.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/vectorified.com/images/open-source-icon-12.png' /><noscript><img loading='lazy' src='/800/600/https/vectorified.com/images/open-source-icon-12.png' /></noscript></p><p> Чтобы максимально эффективно использовать SVG, может потребоваться некоторое обучение, но вознаграждение того стоит.</p><h3><span class="ez-toc-section" id="_SVG-8"> Как работают SVG </span></h3><p> Можно использовать SVG как в обычном элементе <code> <img> </code> в вашем HTML, используя атрибуты ширины и высоты для настройки размеров. Однако этот метод несколько ограничивает ваши возможности по настройке SVG.</p><p> Если вам нужна возможность дальнейшей настройки значков SVG непосредственно из HTML, вам потребуется встроить SVG, просто вставив код прямо в HTML-документ. Затем вы можете изменить цвет или применить фильтры, настроив его с помощью CSS. Вот как выглядит пример иконки SVG:</p><pre> <svg версия = "1.1"
базовый профиль = "полный"
xmlns="http://www.w3.org/2000/svg">
<rect fill="#3686be" />
<circle cx="150" cy="100" r="80" fill="white" />
<text x="150" y="115" font-size="35" text-anchor="middle" fill="#3a3a3a">KeyCDN</text>
</svg>
</pre><p> Приведенный выше код, вдохновленный Mozilla, отображает в браузере примерно такую графику:</p><p> Хотя на первый взгляд код SVG может показаться пугающим, разработка значков SVG и управление ими обманчиво просты.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cldup.com/4zc6OeKs24.png' /><noscript><img loading='lazy' src='/800/600/https/cldup.com/4zc6OeKs24.png' /></noscript> Фактически, вы можете просто использовать такую программу, как Adobe Illustrator, для создания собственной векторной графики для использования в качестве значков. Просто сохраните их как файлы SVG или сгенерируйте код в интерфейсе Illustrator. Вы также можете экспортировать рисунки из Документов Google в виде файлов SVG.</p><h3><span class="ez-toc-section" id="i-18"> Иконочные шрифты все еще полезны? </span></h3><p> Иконочные шрифты далеко не устарели. Хотя они не всегда являются самым эффективным и надежным вариантом, иконочные шрифты по-прежнему относительно просты и легки в реализации, поэтому многие разработчики продолжают их использовать. В зависимости от количества используемых значков может не стоить переключать шрифты значков для SVG в ваших старых проектах; тем не менее, SVG — это окончательный способ будущего, так что вы можете спокойно использовать их в будущем.</p><h3><span class="ez-toc-section" id="_SVG-9"> Сравнение SVG и шрифтов значков </span></h3><p> Чтобы помочь вам решить, какой формат значков выбрать, давайте посмотрим, как эти два варианта сравниваются в разных отделах.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/mir-s3-cdn-cf.behance.net/project_modules/fs/ea546136301347.5716f727e2582.png' /><noscript><img loading='lazy' src='/800/600/https/mir-s3-cdn-cf.behance.net/project_modules/fs/ea546136301347.5716f727e2582.png' /></noscript></p><h4><span class="ez-toc-section" id="i-19"> Преимущества иконочных шрифтов </span></h4><p> Иконочные шрифты существуют уже некоторое время и являются популярным выбором для отображения значков на веб-сайтах и в приложениях. Вот некоторые из их преимуществ:</p><ol><li><p> <strong> Простота использования </strong> : Иконочные шрифты просты в использовании и требуют минимальной настройки. Все, что вам нужно сделать, это включить файлы шрифтов в ваш проект и использовать CSS для отображения значков. Вы даже можете настроить значки с помощью CSS, например, изменить цвет, размер и другие свойства.</p></li><li><p> <strong> Облегченный </strong> : Иконочные шрифты легкие и не сильно увеличивают время загрузки страницы вашего сайта. Поскольку значки кодируются как глифы шрифта, они по сути являются текстом и не требуют загрузки отдельных файлов изображений.</p></li><li><p> <strong> Широко поддерживается </strong> : Иконочные шрифты широко поддерживаются браузерами и могут использоваться практически на любом устройстве или платформе.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/icon-library.com/images/google-font-icon/google-font-icon-0.jpg' /><noscript><img loading='lazy' src='/800/600/https/icon-library.com/images/google-font-icon/google-font-icon-0.jpg' /></noscript> Они также совместимы со средствами чтения с экрана и другими вспомогательными технологиями, что делает их доступными для пользователей с ограниченными возможностями.</p></li></ol><h4><span class="ez-toc-section" id="i-20"> Недостатки шрифтов-иконок </span></h4><p> Однако использование шрифтов-иконок имеет некоторые недостатки:</p><ol><li><p> <strong> Ограниченная настройка </strong> : Хотя шрифты-иконки можно настраивать с помощью CSS, они ограничены с точки зрения гибкости дизайна. Вы ограничены предопределенным набором значков, включенных в шрифт, и не можете создавать свои собственные значки.</p></li><li><p> <strong> Проблемы с качеством </strong> : Некоторые шрифты со значками могут страдать от проблем с качеством, таких как зубчатые края или пикселизация, особенно при меньших размерах. Это может быть особенно заметно на экранах с высоким разрешением.</p></li><li><p> <strong> Проблемы доступности </strong> : Несмотря на то, что иконочные шрифты обычно доступны, их использование вызывает некоторые опасения. Поскольку они закодированы как глифы шрифта, программы чтения с экрана могут испытывать трудности с идентификацией их как изображений, а пользователи могут не иметь доступа к альтернативным текстовым описаниям.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/w7.pngwing.com/pngs/329/551/png-transparent-social-media-computer-icons-font-phone-social-media-angle-white-text.png' /><noscript><img loading='lazy' src='/800/600/https/w7.pngwing.com/pngs/329/551/png-transparent-social-media-computer-icons-font-phone-social-media-angle-white-text.png' /></noscript></p></li></ol><h4><span class="ez-toc-section" id="_SVG-10"> Преимущества SVG </span></h4><p> SVG становятся все более популярными в последние годы и в настоящее время широко используются для отображения значков на веб-сайтах и в приложениях. Вот некоторые из их преимуществ:</p><ol><li><p> <strong> Гибкость дизайна </strong> : SVG обеспечивают большую гибкость дизайна, чем иконочные шрифты, позволяя создавать собственные значки и графику. Вы также можете применять расширенные эффекты и анимацию к SVG с помощью CSS или JavaScript.</p></li><li><p> <strong> Масштабируемость </strong> : SVG масштабируемы и могут быть изменены без потери качества. Это делает их идеальными для использования на экранах с высоким разрешением или в адаптивном дизайне, где размер значков необходимо изменять в зависимости от устройства или размера экрана.</p></li><li><p> <strong> Специальные возможности </strong> : SVG более доступны, чем иконочные шрифты, поскольку они могут быть легко идентифицированы программами чтения с экрана и другими вспомогательными технологиями.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cdn.dribbble.com/users/275406/screenshots/2348912/attachments/449047/another_icon_pre.png' /><noscript><img loading='lazy' src='/800/600/https/cdn.dribbble.com/users/275406/screenshots/2348912/attachments/449047/another_icon_pre.png' /></noscript> Вы также можете предоставить альтернативные текстовые описания для SVG, сделав их доступными для пользователей с ограниченными возможностями.</p></li></ol><h4><span class="ez-toc-section" id="_SVG-11"> Недостатки SVG </span></h4><p> Однако есть и некоторые недостатки использования SVG:</p><ol><li><p> <strong> Сложная настройка собственные пользовательские значки. Возможно, вам потребуется использовать специализированное программное обеспечение или инструменты для создания и оптимизации ваших SVG.</p></li><li><p> <strong> Большие размеры файлов </strong> : SVG могут иметь большие размеры файлов, чем иконочные шрифты, особенно если они содержат сложную графику или анимацию. Это может повлиять на время загрузки страницы и производительность вашего веб-сайта.</p></li><li><p> <strong> Поддержка браузера </strong> : Хотя SVG поддерживаются большинством современных браузеров, некоторые старые браузеры могут не поддерживать их полностью. Это может привести к непоследовательному рендерингу или проблемам с отображением для некоторых пользователей.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/vectorified.com/images/javafx-icon-12.png' /><noscript><img loading='lazy' src='/800/600/https/vectorified.com/images/javafx-icon-12.png' /></noscript></p></li></ol><h3><span class="ez-toc-section" id="i-21"> Какой выбрать? </span></h3><p> Итак, какой вариант выбрать? В конечном итоге это зависит от конкретных требований и ограничений вашего проекта. Вот несколько ключевых факторов, которые следует учитывать при выборе шрифтов-значков и SVG:</p><h4><span class="ez-toc-section" id="1"> 1. Размер </span></h4><p> Если вы решите встроить свои SVG для добавления стилей, они могут быстро увеличиться в размере, а код может стать довольно громоздким. Также стоит отметить, что встроенный код SVG не кэшируется браузером пользователя. С другой стороны, внешние файлы SVG можно кэшировать. Если у вас много значков на одной странице, шрифты значков могут обеспечить более плавный пользовательский интерфейс, чем встроенные SVG. Конечно, если вы используете готовый набор шрифтов для значков, вы, вероятно, будете тратить ресурсы на неиспользуемые значки.</p><p> Здесь стоит отметить, что 10 оптимизированных SVG-иконок, вероятно, будут намного меньше, чем вся библиотека иконок. Однако, если вы создадите свою собственную библиотеку значков, содержащую только те значки, которые вам нужны, шрифт библиотеки значков в конечном итоге станет меньше.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.pinimg.com/originals/86/c0/6d/86c06d402f03d33e148f795956109009.png' /><noscript><img loading='lazy' src='/800/600/https/i.pinimg.com/originals/86/c0/6d/86c06d402f03d33e148f795956109009.png' /></noscript></p><h4><span class="ez-toc-section" id="2"> 2. Производительность </span></h4><p> Иконочные шрифты могут кэшироваться, что ускоряет их загрузку непосредственно из браузера. Однако недостатком этого является то, что они создают дополнительный HTTP-запрос. С другой стороны, если вы встраиваете значки SVG, дополнительные HTTP-запросы не требуются, однако они не могут кэшироваться браузером.</p><p> Однако вы можете включить файлы SVG во внешний файл, что сделает их кэшируемыми браузером. Опять же, с точки зрения производительности разница в скорости будет зависеть от того, насколько велик ваш шрифт значков/SVG. Попробуйте запустить тесты производительности с обоими, чтобы определить, какой из них загружается быстрее.</p><h4><span class="ez-toc-section" id="3"> 3. Гибкость </span></h4><p> Оба формата могут быть оформлены с помощью CSS, но встроенные SVG предоставляют гораздо больше возможностей, таких как обводка глифов и разноцветные значки. Вы даже можете иметь анимированные веб-иконки.</p><h4><span class="ez-toc-section" id="4"> 4. Поддержка браузеров </span></h4><p> Какой бы формат значков вы ни выбрали, вам может потребоваться выполнить некоторые дополнительные действия, чтобы сделать их совместимыми со старыми браузерами.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.kibrispdr.org/data/96/download-icon-huruf-26.jpg' /><noscript><img loading='lazy' src='/800/600/https/www.kibrispdr.org/data/96/download-icon-huruf-26.jpg' /></noscript> Поскольку они существуют дольше, иконочные шрифты поддерживаются более широко. Любой, кто использует IE 6 или выше, что, вероятно, включает всех, должен иметь возможность видеть ваши шрифты значков. Если вы используете SVG, возможно, вы захотите включить полифилл JS для поддержки тех, кто использует IE 8 или более раннюю версию.</p><p> Однако, поскольку большинство пользователей отказались от устаревших версий браузеров, это не должно вызывать особых опасений, независимо от того, выберете ли вы иконочные шрифты или SVG. Единственное отсутствие поддержки с точки зрения значков SVG и современных браузеров связано с IE, который неправильно масштабирует файлы SVG (рекомендуются атрибуты высоты и ширины).</p><h4><span class="ez-toc-section" id="5"> 5. Масштабируемость </span></h4><p> Хотя и SVG, и шрифты значков основаны на векторах, браузеры интерпретируют шрифты значков как текст, что означает, что они подлежат сглаживанию. Поэтому SVG, как правило, выглядят немного четче, чем иконочные шрифты.</p><h4><span class="ez-toc-section" id="6"> 6. Позиционирование </span></h4><p> Поскольку шрифты значков должны быть вставлены через псевдоэлемент, позиционирование значков шрифтов может оказаться сложной задачей.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/pbs.twimg.com/media/B8R_wOsCMAIpwR0.png' /><noscript><img loading='lazy' src='/800/600/https/pbs.twimg.com/media/B8R_wOsCMAIpwR0.png' /></noscript> Возможно, вам придется учитывать высоту строки <code> </code> , <code> вертикальное выравнивание </code> и расстояние между буквами <code> </code> среди других факторов, чтобы псевдоэлемент и фактический глиф идеально совпадали. Для SVG вам просто нужно установить размер.</p><h4><span class="ez-toc-section" id="7"> 7. Доступность </span></h4><p> Если доступность является главным приоритетом для вашего проекта, SVG может быть лучшим выбором. В отличие от иконочных шрифтов, SVG имеют встроенные семантически значимые элементы, поэтому вам не нужно включать какие-либо обходные пути, чтобы сделать ваши шрифты доступными для программ чтения с экрана.</p><h3><span class="ez-toc-section" id="_SVG-12"> Инструменты и ресурсы для значков SVG </span></h3><p> Сеть разработчиков Mozilla предлагает очень подробное руководство по SVG, в котором объясняется, как стилизовать значки с помощью встроенного CSS. В дополнение к Adobe Illustrator существует несколько инструментов, которые помогут вам реализовать значки SVG. IcoMoon — отличный ресурс для готовых SVG и значков шрифтов, а приложение IcoMoon позволяет создавать собственные.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cdn-share-sprites.flaticon.com/pack/0/110/110912-font-awesome_twitter.jpg' /><noscript><img loading='lazy' src='/800/600/https/cdn-share-sprites.flaticon.com/pack/0/110/110912-font-awesome_twitter.jpg' /></noscript> Если вы ищете что-то с открытым исходным кодом, Inkscape — это бесплатная программа для векторного рисования, которая экспортирует файлы SVG. Такие инструменты, как Convertio, позволяют преобразовывать другие форматы изображений в файлы SVG.</p><p> Важно отметить, что такие программы, как Illustrator и Inkscape, часто встраивают <strong> в экспортируемые файлы SVG дополнительную информацию, которая вам </strong> не нужна. Таким образом, вы должны обработать свои значки SVG с помощью инструмента оптимизации, такого как SVGO или SVG Minifier, чтобы обрезать их, прежде чем добавлять на свой веб-сайт.</p><p> Помимо ресурсов, упомянутых выше, существует также множество веб-сайтов с иконками, которые предоставляют высококачественные векторы как платные, так и бесплатные услуги. Ознакомьтесь с нашим полным руководством по ресурсам библиотеки значков, а также с нашим постом о повышении скорости ваших глификонов с помощью CDN глификонов.</p><h3><span class="ez-toc-section" id="i-22"> Резюме </span></h3><p> В сообществе все еще ведутся споры о том, лучше ли иконочные шрифты, чем SVG, или наоборот.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/s3.amazonaws.com/Keynotopia/Screenshots/FontAwesome/FontAwesome-Text-Icons.0041.jpg' /><noscript><img loading='lazy' src='/800/600/https/s3.amazonaws.com/Keynotopia/Screenshots/FontAwesome/FontAwesome-Text-Icons.0041.jpg' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></article><div class="sparkle-author-box"><div class="sparkle-author-image"> <img alt='' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' data-srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=520&d=mm&r=g 2x' class='lazy lazy-hidden avatar avatar-260 photo' height='260' width='260' /><noscript><img alt='' src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' class='avatar avatar-260 photo' height='260' width='260' /></noscript></div><div class="sparkle-author-details"> <span class="author-name"> <a href="https://art-nto.ru/author/alexxlab" title="Записи alexxlab" rel="author">alexxlab</a> </span> <span class="author-designation"> Автор записи </span><div class="author-desc"></div></div></div><nav class="navigation post-navigation"><div class="nav-links"><div class="nav-previous"><a href="https://art-nto.ru/shrift/shrift-uni-neue-skachat-shrift-i-ustanovit-dlya-veb-sajta-i-fotoshopa-besplatno-2.html" rel="prev">Шрифт uni neue: скачать шрифт и установить для веб-сайта и фотошопа бесплатно.</a></div><div class="nav-next"><a href="https://art-nto.ru/shrift/opredelitel-shriftov-onlajn-opredelit-shrift-po-kartinke-onlajn-2.html" rel="next">Определитель шрифтов онлайн: Определить шрифт по картинке онлайн</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/shrift/shrifty-ikonok-50-luchshih-shriftov-s-ikonokami-dlya-veb-dizajna-zapiski-prepodavatelya-2.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://art-nto.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='96976' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><section id="secondaryright" class="home-right-sidebar widget-area" role="complementary"><aside id="search-2" class="widget clearfix widget_search"><form role="search" method="get" class="search-form" action="https://art-nto.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /></form></aside><aside id="categories-3" class="widget clearfix widget_categories"><h2 class="widget-title"><span>Рубрики</span></h2><ul><li class="cat-item cat-item-9"><a href="https://art-nto.ru/category/vektor">Вектор</a></li><li class="cat-item cat-item-5"><a href="https://art-nto.ru/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-10"><a href="https://art-nto.ru/category/maket">Макет</a></li><li class="cat-item cat-item-7"><a href="https://art-nto.ru/category/programm">Программ</a></li><li class="cat-item cat-item-3"><a href="https://art-nto.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-6"><a href="https://art-nto.ru/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://art-nto.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-8"><a href="https://art-nto.ru/category/urok">Урок</a></li><li class="cat-item cat-item-4"><a href="https://art-nto.ru/category/shrift">Шрифт</a></li></ul></aside></section></div></div></div><footer id="colophon" class="site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"><div class="footer-social"><div class="sparkle-wrapper"></div></div><div class="copyright-footer"><div class="sparkle-wrapper"><div class="footer_text"><div id="c_copyright"><p>© 2019. <a href="http://art-nto.ru/" title="Независимое театральное объединение "Зрительские симпатии"">Независимое театральное объединение "Зрительские симпатии"</a></p><p class="text">Все права защищены и охраняются законом Российской Федерации об Авторском праве. Копирование материала разрешено только с использованием ссылки на Art-Nto.ru</p><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div></div></div><div class="scroll-to-top"> <i class="icofont fa fa-angle-up"></i></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://art-nto.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --> <script defer src="https://art-nto.ru/wp-content/cache/autoptimize/js/autoptimize_9471d9f23e7f057b4ffc0056d7cd41ec.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="50035bea33f9cd8e555c9893-|49" defer></script> 
scss
Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует.
Подробности данной проблемы.
Он позволит использовать в вашем проекте те же иконки, что и на GitHub. Доступно более 170 иконок.
Они используются везде: в описаниях товаров, контактных данных и многих других элементах страницы. Двумя популярными вариантами реализации значков являются Icon Fonts и SVG Icons. Каковы их преимущества и недостатки? Что выбрать для собственного сайта? Этот пост должен дать вам все ответы.
К таким значкам относятся символы и глифы. Как правило, набор иконочных шрифтов хранится в файле шрифта.
Другими словами, изображения SVG основаны на тексте и могут работать с CSS, JavaScript, DOM и т. д.
Для SVG достаточно указать размер.