Font icon: Font Awesome Icon Pack | Fill

Icon Fonts или SVG?

Графические иконки — главный элемент буквально всякого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. В случае если не брать в расчет нормальные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Собственно что из них лучше? Разберемся ниже.

Эволюция иконок

Перед тем, как появился язык стилей CSS, все иконки на веб сайтах представляли собой изображения. Но так как файлы изображений больше весят физически, разработчики стремились отыскать один или несколько других способов отображения маленьких иконок. Например, CSS-спрайты дозволили разработчикам хранить все иконки на одном изображении, но из-за проблем с доступностью данный метод не стал популярным способом отображения иконок — и в 2012 на замену им пришли иконочные шрифты. А сейчас многие разработчики отдают предпочтение масштабируемой векторной графике — SVG (Scalable Vector Graphics).

Что такое иконочные шрифты?

Иконочные шрифты — текстовые файлы, которые возможно видоизменить при помощи CSS. Как последствие, масштабируются они значительно лучше, чем растровые изображения, т.к. изменение размера не ведет к ухудшению качества изображения. Изменение цвета или же добавление тени — все это сделать так же просто, как и при работе с простым текстом. В сети возможно легко найти бесплатные для применения шрифты или можно создать свой собственный шрифт. К минусам можно отнести то, что основная масса наборов со шрифтами содержат иконки, которые вы, скорее всего, не будете использовать — и они будут просто занимать место.

Но, как и у CSS-спрайтов, иконочные шрифты имеют собственные недостатки — например, для того, чтобы корректно их отобразить, браузеру приходится делать дополнительные запросы на сервер, что может привести к FOIT (Flash of Invisible Text) — ситуации, когда шрифт не отображается вообще. По этой и другим причинам многие разработчики делают выбор в пользу SVG.

Что такое SVG?

SVG (Scalable Vector Graphics) позволяет отображать в браузере векторную графику. Формат SVG быстро стал новым стандартом для иконок и анимации. Они быстрее загружаются, прекрасно масштабируются и более надежные в использовании, чем иконочные шрифты. Векторная графика полностью стоит из кода и весит гораздо меньше, чем изображения в форматах JPG или PNG и большинство библиотек иконочных шрифтов.

Сравнение Icon Fonts и SWG

Настало время сопоставить SVG и иконочные шрифты по нескольким характеристикам.

1. Размер

   Если использовать встроенный SVG, то есть прописывать SVG в CSS, то код может стать тяжелым и громоздким. К тому же встроенный SVG код не кэшируется пользовательскими браузерами, в отличие от внешних SVG файлов. Поэтому если на определенной странице сайта много разных иконок, то иконочные шрифты будут предпочтительнее встроенных SVG изображений (но при условии, что вы не используете готовую библиотеку иконочных шрифтов).

   Важно понимать, что 10 оптимизированных SVG иконок, скорее всего, будут весить меньше, чем целая библиотека иконочных шрифтов. А вот если вы создадите библиотеку только с теми иконками, которые нужны вам, то такая библиотека будет выигрывать по весу.

2. Производительность

   Иконочные шрифты могут кэшироваться, а значит, они загружаются быстрее. В то же время для их загрузки нужен дополнительный HTTP-запрос.

   Встроенные SVG иконки не требуют дополнительного запроса, но и кэшироваться браузером они тоже не могут.

   Можно собрать SVG файлы в отдельный внешний файл — и тогда его можно будет кэшировать.

   Опять же, производительность во многом зависит от того, сколько весят ваши иконочные шрифты/SVG.

3. Гибкость

   Оба формата можно настраивать с использованием CSS, но SVG дает гораздо больше возможностей, например, сделать иконки разноцветными.

   Иконочным шрифтам можно прописывать CSS-стили (тень, цвет и т.д.), их можно массово изменять при помощи одного правила в CSS, их можно анимировать.

4. Поддержка браузеров

   Какой бы формат вы ни выбрали, его все равно нужно будет дорабатывать для того, чтобы обеспечить поддержку старых браузеров. Т.к. иконочные шрифты существуют дольше, чем SVG, то и поддержка у них шире — их увидят все, кто использует IE 6 и более новые версии.

   С другой стороны, сейчас подавляющее большинство пользователей использует современные браузеры, так что на этот пункт сильного внимания обращать не стоит. Единственный нюанс, о котором стоит помнить — IE и Edge не всегда правильно масштабируют SVG файлы.

5. Масштабируемость

   И иконочные шрифты, и SVG — это векторные форматы. Поэтому их можно легко увеличивать или уменьшать без потери качества. Браузеры интерпретируют иконочные шрифты как текст, поэтому они могут сглаживаться — и при сравнении SVG изображения выглядят чуть более резкими, чем иконочные шрифты.

Вывод

До сих пор в среде разработчиков нет единого мнения о том, что лучше использовать — иконочные шрифты или SVG. Суть в том, что зачастую многое зависит от поставленных задач и проекта в целом.

Но все же сейчас чаще всего используют SVG — у этого формата — разметки лучше масштабируемость, UX (пользовательский опыт), и он поддерживается всеми основными браузерами.

В то же время иконочные шрифты станут хорошим решением для проекта с большим количеством иконок в одном стиле.

• 2.99
• 1
• 2
• 3
• 4
• 5

Голосов: 750 | Просмотров: 4438

Иконочный шрифт (Font Awesome целиком)

Иконочный шрифт (Font Awesome целиком)

Иконочный шрифт (Font Awesome целиком)

calendar
calendar

fa-lg fa-2x fa-3x fa-4x fa-5x

Loading… Loading… Loading.

..

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

	win	osx
chrome
opera
firefox
yandex bro
safari
ie11
edge

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Своего дал алфавит заманивший, переписали коварных.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. _`abcdefghijklmnopqrstuvwxyz{|}~¨©«®´¸»ˆ˚˜ЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяё–—…‹›€™

Что	Как
light	Лёгкий текст. Light text. Лёгкий текст. Light text.
regular	Нормальный текст. Regular text. Нормальный текст. Regular text.
bold	Полужирный текст. Bold text. Полужирный текст. Bold text.

Что	Как
light	Лёгкий текст. Light text. Лёгкий текст. Light text.
regular	Нормальный текст. Regular text. Нормальный текст. Regular text.
bold	Полужирный текст. Bold text. Полужирный текст. Bold text.

Снова мир всемогущая, языком великий заголовок запятой его власти, рыбного последний текст, текста безорфографичный обеспечивает оксмокс.

Ratione voluptates praesentium, earum quisquam. Animi dolorum enim quidem quae fugiat porro voluptate dolorem repellat accusantium.

Заголовок header

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Своего дал алфавит заманивший, переписали коварных.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Своего дал алфавит заманивший, переписали коварных.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Своего дал алфавит заманивший, переписали коварных.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Заголовок header

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Своего дал алфавит заманивший, переписали коварных.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Своего дал алфавит заманивший, переписали коварных.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Своего дал алфавит заманивший, переписали коварных.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, voluptatibus ut minus necessitatibus saepe laborum optio.

Добавление шрифтов значков в WordPress с помощью улучшенного шрифта Awesome

Логотип WPMU DEV

Добавление шрифтов значков в WordPress с помощью Better Font Awesome

Хасан Ахтар Хасан Ахтар – 7 апреля 2022 г.

10 Комментарии

Людей естественным образом привлекают визуальные аспекты веб-сайта WordPress в той же мере, в какой их привлекает письменный контент, которым вы делитесь. На самом деле, по словам интернет-маркетолога Джеффа Булласа, статьи с изображениями набирают на 94% больше просмотров, чем статьи без изображений.

Если вы спросите меня, это огромный прирост просмотров страниц.

А для чего именно?

Просто добавьте в свой контент несколько высококачественных изображений, соответствующих статье.

А как насчет изображений на вашем веб-сайте, которые выходят за рамки скриншотов и стоковых фотографий? Как насчет изображений, которые не только привлекают внимание, но и выполняют полезную функцию?

Да, я про иконки. Вы знаете, те крошечные маленькие изображения, которые разбросаны по веб-сайтам с целью обмена в социальных сетях, связи с владельцами бизнеса и загрузки информации, и это лишь некоторые из них.

Поскольку идея о том, что посетители сайта не только привлекаются к значкам изображений на веб-сайтах, но и склонны к взаимодействию с ними, зародилась, люди повсюду начали добавлять их на свои веб-сайты.

Тем не менее, по мере развития технологий, как это всегда бывает, традиционные значки-изображения начали давать сбои в качестве графического решения для веб-сайтов. Это связано с тем, что они добавляют слишком много веса файлам, требуют слишком много HTTP-запросов, плохо масштабируются и, что хуже всего, не подходят для мобильных устройств.

Но есть решение: иконочные шрифты.

Сегодня я собираюсь обсудить, что такое иконочные шрифты и какие преимущества дает их использование на вашем веб-сайте WordPress. Итак, приступим.

Продолжить чтение или перейти по следующим ссылкам:

• Что такое иконочные шрифты и зачем их использовать?
• Параметры значка шрифта

Что такое иконочные шрифты и зачем их использовать?

Иконочные шрифты — это именно то, на что они похожи — шрифты, полностью состоящие из значков. На самом деле, иконочные шрифты можно описать как шрифты, которые отображают только символы или символы, исключая буквы и цифры, которые присутствуют в традиционных текстовых шрифтах.

Иконочные шрифты — это изображения, которые часто побуждают к действию, но на самом деле они не являются изображениями. Шрифты

Icons используются для отображения часто используемых символов на вашем веб-сайте. Например, кнопки социальных сетей, ваша корзина покупок, кнопки загрузки и кнопки навигации — все это примеры значков, которые отображаются на вашем веб-сайте в виде крошечных интерактивных изображений. Иконочные шрифты

могут использоваться для представления самых разных идей.

Зачем использовать шрифты значков?

Значки изображений в прошлом хорошо работали для многих владельцев веб-сайтов. Однако по мере развития правил навигации, удобства использования и дизайна в мире Интернета иконочные шрифты стали лучшим решением для отображения интерактивных изображений на веб-сайте.

Вот несколько веских причин, по которым шрифты-иконки являются лучшим выбором:

• Простое масштабирование без потери качества
• Возможность настройки цвета и тени
• 100% отклик
• Работает как спрайты изображений CSS, но может стилизоваться как текст
• Простота использования
• Прозрачная выбивная опора
• Кроссбраузерность
• Настройка непрозрачности, поворота и т. д.
• Меньшие размеры файлов
• Не жертвуйте скоростью или производительностью вашего сайта

Как видите, есть несколько причин, по которым вы можете захотеть использовать на своем веб-сайте иконочный шрифт, а не изображение.

Варианты значков шрифтов

Для начала давайте рассмотрим некоторые из лучших мест, где можно найти как бесплатные, так и премиальные наборы шрифтов значков. С помощью этих ресурсов вы можете создавать пользовательские значки шрифтов, использовать эксклюзивные и уникальные изображения значков и даже получать доступ к инструментам, которые помогут вам импортировать значки непосредственно на ваш веб-сайт.

• Фонтелло . Преобразуйте бесплатные пользовательские векторные изображения в веб-шрифты для использования на вашем веб-сайте, чтобы они были четкими, масштабируемыми и совместимыми с разными браузерами. Кроме того, настройте с помощью CSS, чтобы изменить цвета, размеры, тени и многое другое.
• Икомун . Этот онлайн-сервис позволяет создавать четкие шрифты для значков с точностью до пикселя. Кроме того, вы можете использовать эксклюзивный конструктор иконочных шрифтов, чтобы преобразовать значки изображений в иконочные шрифты. С 5000 бесплатными значками с открытым исходным кодом и более 4000 премиальных значков, помещенных в специальные пакеты значков, здесь нет недостатка в изображениях, которые можно выбрать.

Далее давайте рассмотрим подключаемый модуль шрифта, который можно использовать на вашем веб-сайте WordPress.

WP SVG Icons

WP SVG Icons — это плагин значков WordPress, который содержит более 490 включенных значков. Кроме того, вы можете создавать и загружать до 10 ваших собственных значков с помощью эксклюзивного импортера шрифтов Icomoon Icon Pack.

С помощью этого плагина вы можете легко вставлять значки в свои сообщения, страницы и боковые панели без написания единой строки кода, используя новейшую функцию шорткода.

Заключительные мысли

Использование иконочных шрифтов на вашем веб-сайте WordPress не только добавляет красивые изображения без ущерба для скорости или производительности, но и повышает уровень функциональности вашего сайта, что способствует более активному взаимодействию с пользователем.

Иконочные шрифты легко масштабировать, настраивать и, что самое главное, они обеспечивают посетителям вашего сайта, независимо от того, откуда они заходят на ваш сайт, максимальное удобство просмотра.

Использование подключаемого решения, такого как WP SVG Icons, — один из самых простых способов добавления шрифтов значков на ваш веб-сайт. Это связано с тем, что с плагином шрифта практически не требуется настройка, и он обычно делает большую часть работы за вас, поэтому вам не нужно иметь дело с обширным HTML-кодом.

Если вы хотите увеличить количество просмотров страниц своего веб-сайта, улучшить взаимодействие с контентом и предоставить посетителям веб-сайта привлекательный веб-сайт, который четко сообщает о том, что вы от них хотите, рассмотрите возможность добавления шрифтов-иконок на свой веб-сайт с помощью Better Font Awesome или любого из другие варианты, которыми я поделился с вами.

Метки:

• шрифты

Поделитесь этой статьей

Получайте свежие обновления WP прямо на свой почтовый ящик.

Введите ваш адрес электронной почты…

Нажимая подписаться, я даю согласие на получение новостей WPny! P.S. Мы сохраняем вашу электронную почту на 100% конфиденциальной и не спамим 🙂

Icons — Font Awesome — King County

Icons — Font Awesome — King County Перейти к основному содержанию

Искать на сайте kingcounty.gov

1. Дом
2. Работа с дизайном и гражданской активностью
3. Сайткор
4. Основные элементы
5. Иконки — Font Awesome

• Варианты исполнения
• Значки ссылок
• Стандарты
• Все шрифты

Наши стандартные значки используют Font Awesome — векторный шрифт значков. Посетите веб-сайт Font Awesome  , чтобы узнать о них больше. Если вы пытаетесь использовать значок, и он не работает, это может быть связано с тем, что это версия, до которой мы еще не обновились.

Чтобы добавить шрифт, вы должны работать в режиме HTML (кроме случаев, когда используется надстройка выноски).

Пример простого значка

Значок встроенного календаря

Пример значка заголовка

В этом разделе

Параметры стиля Font Awesome

Используйте Font Awesome для добавления значков на страницы. Чтобы использовать их, добавьте .fa класс, а затем класс значка, который можно найти в Font Awesome.

fa-hand-o-right

fa-camera-retro

fa-hand-o-left

fa-facebook

Увеличение размера значков с помощью fa-lg (увеличение на 33%), fa-2x , fa-3x , fa-4x или fa-5x классов.

Размеры будут увеличиваться относительно контейнера.

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Чтобы сложить несколько значков, используйте класс fa-stack для родительского элемента, fa-stack-1x для значка обычного размера и fa-stack-2x для значка большего размера. fa-inverse можно использовать в качестве альтернативного цвета значка. Можно даже кинуть большую иконку классы на родительском для дальнейшего контроля размеров.

fa-twitter на fa-square-o
fa-flag на fa-circle
fa-terminal на fa-square
fa-ban на fa-камере

Изменить цвет, добавив класс.

.fa-color-default
.fa-color-primary
.fa-color-success
.fa-color-info
.fa-color-warning
.fa-color-danger

Используйте значки Font Awesome для обозначения нестандартных ссылок

Используйте значки, чтобы сообщать пользователям, когда гиперссылка предназначена не для открытия другой страницы на kingcounty.