Иконочные шрифты: Font Awesome — иконочный шрифт и CSS-инструментарий

Genericons – это отличный шрифт для значков, созданный Automattic , также основателем WordPress. На конец 2013 года шрифт включает 121 иконку, и время от времени он растет. Он также лицензирован по лицензии GPL, поэтому мы можем использовать этот замечательный набор иконок во всех наших проектах с открытым исходным кодом и совместимыми лицензиями.

Если вы не используете значок шрифта на своем сайте WordPress, сейчас самое время включить Genericons!

Включая это в вашу тему

Если вы хотите использовать этот значок шрифта в своей теме, выполните несколько простых шагов:

1. Скачать Genericons , нажав гигантскую кнопку Скачать на сайте.
2. Загрузите папку со шрифтами в корневую папку вашей темы. Если вы хотите, вы можете переименовать папку и поместить ее в другую папку.
3. Скопируйте содержимое файла genericons.css в файл style. css вашей темы. (Если вы изменили имя и путь к папке шрифтов, не забудьте внести изменения в CSS, чтобы исправить путь к файлам шрифтов.)

Вот и все, ваша тема теперь на 100% совместима с Genericons! Теперь вы можете использовать значки в ваших HTML-элементах следующим образом:

Если вы хотите использовать значок в качестве отдельного элемента, вам нужно использовать элемент <i> HTML, например:

Обратите внимание, что вам нужно использовать два класса CSS: genericon и genericon-{icon-name} . Я не собираюсь вставлять имена значков в эту статью (потому что новые значки добавляются в шрифт регулярно), но вы можете увидеть категоризированный список имен значков в файле genericons.css . Кроме того, вы можете проверить genericons.com и нажмите на каждый значок, чтобы увидеть соответствующее имя.

Использование его с плагином Genericon’d

Если вы не хотите интегрировать шрифт в свою тему и использовать пакет значков с отдельным плагином, вы можете использовать плагин Genericon на wordpress.org .

Использование практически такое же – вам просто нужно добавить еще один класс с именем genericond :

Кроме того, вы можете использовать короткий код:

Обратите внимание, что на этот раз вам нужно использовать только имя иконки.

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

Что вы думаете о дженериках? Поделитесь своими комментариями с нами ниже! И если вам понравилась статья, поделитесь ей, чтобы ваши друзья тоже узнали о Genericons!

Самые Лучшие Бесплатные И Платные Иконочные Шрифты

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

Ищете уникальные иконки для вашего сайта? Постоянно натыкаетесь на Font Awesome, но не находите на нём ничего интересного? Тогда обязательно прочитайте эту статью — здесь мы рассказываем, что такое иконочный шрифт, описываем множество бесплатных сайтов с ним, а также даём образцы иконок каждого сервиса. Сделайте свой выбор для создания уникального образа!

Лучшие альтернативы Font Awesome

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

Плюсы использования иконочных шрифтов 

• Их можно видоизменять любым образом: указать размер, цвет, фон, тень, градиент, применить псевдо-классы: hover или focus — чтобы создать свой собственный стиль.
• Их можно анимировать.
• Увеличение или уменьшение размера иконки не влияет на качество, поэтому они корректно отображаются даже на Retina-дисплеях.
• По сравнению с обычными изображениями, они меньше весят и быстрее загружаются.
• Для загрузки иконочных шрифтов нужен лишь один HTTP запрос, что может многократно увеличить скорость загрузки страниц на сайте.
• Они поддерживаются всеми браузерами (даже очень старыми версиями).

В настоящее время самым популярным шрифтом является Font Awesome. Он известен почти каждому, кто хоть раз занимался разработкой сайтов. Он изначально создавался под Bootstrap, но сейчас стал самостоятельной библиотекой значков и изображений, насчитывающей более 600 иконок.

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

Бесплатные наборы шрифтов

1. WebHostingHub Glyphs

Один из самых больших наборов иконок, он насчитывает 2075 картинок. Есть возможность скачивать их в формате PNG двух размеров (16 и 32 пикселя). Можно изменять цвет значков, их размеры, как и во многих других наборах иконок. На сайте даже есть наглядный пример, как это можно сделать: четыре ползунка рядом со случайной картинкой определяют её размер, цвет, тень и фокус тени.  

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

WebHostingHub Glyphs

2. Dashicons – The Official WordPress

Dassicons — это шрифт иконы, разработанный Mel Choyce, специально для того, чтобы набрать новый интерфейс Admin WP. Это отличная альтернатива Awesome Font, которая стоит проверить.

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

На данный момент библиотека Dashicons WordPress содержит 197 иконок, которые делятся на 15 разделов:

• Admin Menu;
• Welcome Screen;
• Post Formats;
• Media;
• Image Editing;
• TinyMCE;
• Posts Screen;
• Sorting;
• Social;
• WordPress. org Specific: Jobs, Profiles, WordCamps;
• Products;
• Taxonomies;
• Widgets;
• Notifications;
• Misc.

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

На официальном сайте вы увидите вот такой интерфейс. При нажатии на понравившийся значок он появится в хидере рядом с его ссылками в нескольких форматах: CSS, HTML и Glyph.Dashicons – The Official WordPress

3. Ionicons

Эта альтернатива Font Awesome представляет 528 разнообразных иконок, которые подойдут для различных меню, внутренних списков и вкладок. Девиз компании гласит: Изготовлено с любовью вручную. В это можно поверить, обратив внимание, с какой детализацией выполнены эти значки. 

Ionicons выпускают свои иконки для использования в мобильных приложениях на IOS, Android, веб-приложениях и настольных ПК. Они имеют открытый код, который сильно облегчают работу по оформлению сайта. Как это выглядит, показано на скриншоте ниже.

Ionicons — продукт компании Ionic, которая создаёт не только значки для сайтов, но и предлагает пользователям целый набор удобных для разработчиков сайтов продуктов. Они позволят Вам создавать, защищать и доставлять приложения корпоративного уровня на любой платформе.  

Ionicons

4. Стандартные символы HTML

Помимо специально созданных сервисов, не стоит забывать об абсолютно бесплатном сборнике разнообразных иконок HTML. Вы можете изменять их размер и цвет, сохраняя хорошее качество изображения. 

Все иконки выполнены толстой линией, а код открыт для каждого. По нашему мнению, стандартные символы HTML — замечательная альтернатива Font Awesome.

Стандартные символы HTML

Стандартные символы HTML

5. Linea Iconset

Linea Iconset имеет в своём ассортименте 716 значков, с помощью которых можно наладить лучший контакт с пользователем, ведь в современном мире много слов и текста ни к чему. Данный сайт предлагает скачать целым паком сборник иконок по направлениям, например, Музыка, Электронная торговля и другие. Сами иконки выглядят как линии, образующие рисунок того или иного значения.

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

Linea Iconset

6. Android Icons

Прекрасный добрый сервис, встречающий гостей большим сердцем и благодарностью. В своей библиотеке имеет 250 символов, которые можно использовать абсолютно бесплатно — ведь Android Icons имеет открытый код, — а с помощью CSS их можно изменять: менять размеры, формы, цвета. 

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

Android Icons

7. Themify Icons

Этот сервис предлагает полный набор значков для использования в веб-дизайне и приложениях. Все 320 иконок поделены на группы, такие как Стрелки направления, Иконки веб-приложений, Текстовый редактор и другие. 

Themify Icons работает на обеспечении WordPress, так что их значки можно легко использовать на любой теме WordPress: для добавления в меню, заголовок виджета или других. 

Themify Icons

8. StackIcons

Хоть сайт и предлагает немного вариантов иконок (всего 60), они очень яркие и красочные, а также легко меняют цвет, объем, объединяются с другими символами, размер может увеличиваться или уменьшаться без потери качества изображения. Иконки идеально подходят до большинства современных социальных брендов: от App.net до Zerply. Для внутренних ссылок контактов компании StackIcons подходит как никто другой.

StackIcons

9. GitHub’s Octicons

Эти значки делиться на два формата: 16 и 24 пикселя. Несмотря на то, что в этих списках представлены разные иконки, каждый из них можно представить в большем или меньшем виде. Всего библиотека сайта насчитывает около 250 изображений, зашифрованных в текстовые файлы.

GitHub’s Octicons создаёт свои уникальные иконки с открытым кодом, позволяя пользователю копировать или скачать код в формате SVG, а также Ruby, Jekyll и React. 

GitHub’s Octicons

10. Material Design Iconic Font

Material Design Iconic Font позволяет использовать множество иконок, подходящих для Google, в различных цветах. Этот шрифт создан дизайнером Google Material на основе CSS, то есть Вы можете проводить все операции, доступные в этом языке программирования, с предлагаемыми иконками. 

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

Material Design Iconic Font

Платные шрифты

1.

Сервис имеет в своих хранилищах более 1600 иконок, и предлагает попробовать бесплатную версию, включающую в себя лишь 490 образцов. За полный пакет услуг с премиум-условиями, с множеством векторных форматов и фигурами Photoshop, сайт просит 59$. Эти деньги находятся на двухнедельной гарантии.

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

IcoMoon

2. Streamline 

Данный сервис представляет более 75000 (!) разнообразных иконок. Они поражают своей необычностью, яркостью и разнообразием настолько, что влюбляешься в них с первого взгляда. 

Streamline Icons — один из немногих сервисов, позволяющий работать с Sketch, благодаря чему можно изменять цвет иконок и толщину их линий. На сайте каждый образец представлен в трёх видах: Light, Regular и Bold. Streamline имеет пробную бесплатную версию, но также предлагает приобрести платные пакеты услуг. Например, сразу весь набор значков можно приобрести за 228$ в год. С этим пакетом идут векторные файлы в формате SVG и PDF, высокое разрешение изображения, право на пользование продукцией без указания автора. 

Streamline

3. Flaticon 

«Флаги стран», «Социальные Медиа», «Бизнес Аналитика» — только малая часть непопулярных разделов символов на этом сервисе. Необычные иконки насчитывают невообразимые 108 683 набора, созданные профессиональными дизайнерами и простыми пользователями. Вы тоже можете создать свой собственный набор иконок и продать его на этом же сайте.

Формат файлов тоже разнообразен: PNG, PSD, SVG, EPS, и BASE 64. Вы можете легко импортировать значки в Illustrator, After Effects и Photoshop.

Премиум пакет стоит 40,50 € в месяц, и даёт доступ к эксклюзивным иллюстрациям, полному праву в части лицензирования, а также убирает рекламу. Бесплатные образцы тоже есть, и их неожиданно много для одного сайта: более 2 миллионов. Ежемесячно создатели добавляют новые иконки, так что коллекция не ограничена этой цифрой.

Flaticon

4. Smashicons 

Smashicons всего за 5$ в месяц открывает доступ ко всем уже имеющимся иконкам, а также к тем, что будут добавлены в будущем. Все иконки представлены в виде редактируемых векторов в двух форматах: PNG и SVG. Постоянно добавляются новые иконки, а также появились открытые ресурсы для дизайна. Smashicons предлагает вам 174 ресурса для Ваших творческих проектов. 

Smashicons

Заключение

В интернете можно легко найти множество сервисов, которые бесплатно или платно дают всем желающим тысячи красивых иконок. С их помощью можно оформить сайт или страницу в социальной сети. Альтернативы Font Awesome много, но, к сожалению, русскоязычных сайтов мало. Хотя даже без перевода понятно, как найти нужный значок и код для него. Font Awesome — не единственный сервис, достойный внимания, и с каждым днём появляется всё больше новых сайтов с уникальными изображениями.  

  PDF: Самые Лучшие Бесплатные И Платные Иконочные Шрифты — Альтернативы Font Awesome

⏧ Альтернатива Font Awesome,  ⏧ альтернативы Font Awesome,  ⏧ Шрифты веб-иконок,  ⏧ лучший иконочный шрифт для веб-сайта

Как залить шрифт в фигму

Как добавить шрифт в фигму (Figma) за 2 минуты. Видео инструкция.

В этой статье и видео уроке вы узнаете, как добавить шрифт в фигму (Figma) буквально за пару минут. Это быстрая, пошаговая инструкция.

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

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

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

1. Для установки Font Installer перейдите по адресу: https://www.figma.com/downloads/
2. Справа выберите нужную операционную систему. Windows или MacOs и скачайте приложение.
3. Установите приложение Font Installer и все шрифты с вашего компьютера будут отображаться в браузерной версии Figma.

Чтобы добавить новый шрифт в фигму, скачайте файл шрифта в формате «Otf». Например возьмем шрифт gilroy. Кликните на файл шрифта 2 раза и нажмите на кнопку установить. После этого можно перезагрузить фигму и этот шрифт появиться в вашей программе.

Если вы задаетесь вопросом, «Какой бы лучше шрифт подобрать и установить в фигму, чтобы он был максимально необычным, креативным и красивым», то отбросьте эту идею.

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

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

• Montseratt
• Open Sans
• Raleway
• Roboto
• Noto sans
• Ubuntu
• Oswald
• Rubik
• Bebas Neue
• Pt sans
• Pt serif
• Playfair display

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

Как загрузить шрифты в Figma

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

Шрифты в десктопной версии Фигма

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

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

Подключить локальные шрифты в браузерную версию Figma

Тут все немного сложнее, но то же просто) нужно зайти в настройки своего аккаутна из браузерной версии вот тут

Найти там пункт fonts и кликнуть на большую синюю кнопку

Загрузив утилиту у тебя появится примерно такое сообщение

Вот видишь, наверное, у меня 466 шрифтов на локальной машине, которые теперь тоже подтягиваются в Фигма.

Иконочный шрифт в Фигма

Но и это еще не все. Ты всегда можешь использовать иконочный шрифт в фигма, типа фонтаусом и ему подобные. При этом ты можешь сам создавать свои иконочные шрифты вот на этом сервисе icomoon.io. Тупо заливай туда свои свг, превращай в шрифт и загружай его себе на комп. Понятное дело, что Фигма подтянет их и у тебя будет свой собственный уникальный иконочный шрифт. Круто, правда?

Читай о том, как сделать Фигму на русском и как поменять хот кеи в программе.

Как добавить шрифт в Figma с компьютера и в браузере за 2 минуты

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

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

Особенностью фигмы является то, что она синхронизирует все шрифты с сервисом google fonts. То есть все те шрифты, которые присутствуют на этом сервисе, автоматически доступны и в figma. Это очень удобно, потому что нет необходимо их отдельно скачивать.

Как добавить шрифт в Figma с компьютера

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

Как установить шрифт себе на компьютер? Очень просто. Скачиваете нужный вам шрифт, распаковываете архив, переходите в папку со шрифтом, выбираете шрифт (один или несколько), нажимаете правой кнопкой мыши и выбираете пункт «Установить для всех пользователей».

Можете устанавливать по одному, а можете выбрать сразу все и установить все разом. Помимо этого, можно просто перенести нужные вам шрифты в локальную папку со шрифтами на вашем компьютере. На windows она находится в «Панели управления». Если вы используете 10-ку, то сперва переключите вид на «Мелкие значки», тогда вы сразу увидите нужную вам папку.

Выбираете необходимые шрифты и переносите их туда. Либо стандартным сочетанием клавиш ctrl+c/ctrl+v.

Как добавить шрифт в Figma в браузере

При использовании сторонних шрифтов (не с гугл фонтс) у вас могут возникнуть проблемы при открытии макета в браузере. Браузер изначально подтягивает только шрифты из сервиса google fonts. Других он не видит и поэтому может возникнуть конфликт. Чтобы этого избежать, нужно провести некоторые манипуляции.

Во-первых, зайти через браузер в свой аккаунт фигмы и перейти в свой профиль.

Спустится немного нижи и найти пункт «Fonts» с большой синей кнопкой

Скачиваете эту утилиту и устанавливаете ее, следуя инструкции. Весь процесс занимает буквально 2 минуты. После установки, у вас подтянутся все локальные шрифты, которые находятся на вашем компьютере.

Теперь можете без проблем пользоваться ими и в браузерной версии программы. Бинго!

Как работать с отсутствующими шрифтами в Figma

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

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

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

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

Как добавить иконочный шрифт FontAwesome в Figma

Помимо стандартных шрифтов есть возможность загрузить иконочные шрифты от популярного сервиса Font Awesome. Для тех, кто не знает, Font Awesome — это сервис, который позволяет вставлять иконки через обычный шрифт, а не через файл svg. Это бывает удобно, когда лень скачивать какую-то иконку. Вместо этого можно просто ее «написать».

Для этого нам нужно сначала установить иконочный шрифт себе на компьютер. Переходите на официальный сайт fontawesome.com в раздел «Start»

Спускаетесь вниз и находите пункт «Desktop»

И далее нажимаете на кнопку «Download for free»

У вас скачается шрифт и вам нужно просто установить его себе на компьютер по тому принципу, который мы рассматривали в начале статьи. При распаковке, шрифты будут находиться в папке otfs, там их 3 штуки, все 3 и надо установить.

Принцип работы иконочного шрифта в Фигме

Для начала создайте текстовую пустую область с помощью инструмента «Text».

Далее перейдите на сайт fontawesome.com. Там будут все иконки, которые доступны для использования. Они подразделяются на 3 вкладки «Solid», «Regular» и «Brands».

Solid — это иконки с заливкой, Regular — с обводкой, а Brands — иконки брендов. В зависимости от типа иконки вам нужно выбирать и соответствующий шрифт в фигме. Для использования нужно выделить иероглиф иконки и выбрать пункт «Копировать».

Далее перейти в figma и в текстовый контейнер вставить нашу иконку.

У нас ничего не отображается, потому что выбран шрифт «Roboto». Нам нужно выбрать шрифт Font Awesome. Я копировал иконку из раздела «Solid», поэтому именно такой шрифт я и выбираю. После этого моя иконка корректно отобразится.

Чтобы манипулировать размерами иконки, нужно изменять размеры шрифта. Помимо этого, вы можете легко перевести иконку в вектор и пометить для экспорта. Для этого достаточно выбрать текстовый контейнер и нажать сочетание клавиш Ctrl+Shift+O.

Какие шрифты использовать в дизайне

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

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

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

Проще всего, использовать шрифты с сервиса google fonts. Они и бесплатные и их можно легко подключить к проекту при разработке. Но единственный минус — шрифтов с поддержкой кириллицы не так много.

Заключение

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

Если хотите освоить Figma на профессиональном уровне, тогда рекомендую пройти курс «Figma с 0 до PRO», на котором вы научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.

В ней я рассказываю свою историю, как мне удалось стать дизайнером с полного нуля и как бы я сегодня действовал, если бы начинал все с «чистого листа».

Прекращение использования шрифтов-иконок. Автор: Майкл Иригойен. Однако прошло почти 22 года, прежде чем иконочные шрифты стали тенденцией дизайна в Интернете.

Введение правила CSS @font-face позволило веб-дизайнерам указывать собственные шрифты для отображения текста. К 2011 году его поддерживали все основные браузеры. Это породило идею о том, что шрифты, состоящие из пиктограмм, например, Wingdings можно использовать вместо растровых изображений в Интернете. Учитывая, что реальная поддержка SVG во всех основных браузерах не была стабильной до начала 2020 года, иконочные шрифты де-факто были способом добавления векторных значков на ваш веб-сайт.

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

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

Flash of Unstyled Content (FOUC)

При использовании @font-face вы указываете браузеру сделать HTTP-запрос для требуемого файла шрифта. Этот запрос также не отправляется немедленно. Когда браузер начинает анализировать HTML и все связанные файлы, на которые есть ссылки в разметке, он строит объектную модель документа (DOM) в реальном времени. Когда связанный шрифт найден, запрос запускается. Время, необходимое для извлечения шрифта, может зависеть от размера ресурса шрифта, условий сети и аппаратного обеспечения пользователя.

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

Примечание : можно использовать более новые директивы, такие как preload , для ресурсов шрифтов, чтобы избежать FOUC. Однако это не решает всех других проблем, определенных в этой статье, и не рекомендуется.

Специальные возможности

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

1. Обрабатывается как текст — Браузер обрабатывает шрифты как текст, потому что именно такими шрифты и должны быть. Программы чтения с экрана с годами становятся все умнее, но им все еще трудно отличить разборчивый текст от пиктограммы. Большинство программ чтения с экрана читают вслух текст, вставленный с помощью CSS, поэтому, когда они натыкаются на ваши значки, они могут сказать «непроизносимо» или могут быть полностью пропущены.

2. Таблица стилей переопределяет — Люди с нарушениями зрения часто используют пользовательские таблицы стилей для переопределения стилей по умолчанию посещаемых веб-сайтов, чтобы упростить их использование. Это может включать изменение цветовых схем, увеличение размера или веса шрифта или даже полное изменение начертания шрифта. Если ваш сайт использует значки вне контекста, кто-то, использующий вспомогательный шрифт (например, OpenDyslexic), заменит ваши значки и полностью исчезнет, ​​что может привести к тому, что ваш веб-сайт станет непригодным для использования.

3. Невозможно предоставить метаданные — Процесс внедрения иконочного шрифта в Интернете требует использования псевдоэлементов ::before или ::after . Семантически псевдоэлементы ::before и ::after предназначены для добавления косметического содержимого к существующему элементу. Для иконочных шрифтов это имеет смысл, если иконка используется в контексте с другим элементом. Однако во многих случаях значок используется в качестве основного фокуса. Например, «x» для «закрыть» или дом для возвращения «домой». Сами по себе эти значки не предоставляют никакой семантической информации о своем содержимом; Вы не можете пометить их или описать напрямую.

Размер и ремонтопригодность

Иконочные шрифты недешевы. Каждый раз, когда посетитель загружает ваш иконочный шрифт, он загружает каждую иконку, которую вы собираетесь использовать в любом месте вашего сайта, независимо от того, видят они их все или нет. Один только этот факт делает иконочные шрифты сложными и довольно раздражающими в обслуживании. Если ваш иконочный шрифт содержит 200 иконок, а вы используете 10 из них, вы вынуждаете своих посетителей загружать 190 иконок, которые они никогда не увидят. Это ухудшит впечатление от вашего посетителя, увеличив время загрузки и расширив FOUC.

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

Ухудшение визуального качества

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

Трудно стилизовать/позиционировать

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

SVG спешат на помощь!

С выпуском версии браузера Microsoft Edge на платформе Chromium в начале 2020 года масштабируемая векторная графика (SVG) стала полностью поддерживаться во всех основных браузерах. Даже до этого SVG поддерживались во всех браузерах с 2012 года, хотя и с некоторыми оговорками относительно масштабирования в Internet Explorer и до Chromium Edge. И угадайте, что? SVG — это потрясающих веб-иконок!

Icons Just Work

Данные изображения SVG хранятся непосредственно в вашем HTML-документе. Как только браузер его обрабатывает, он отображает его. Вам не нужно ждать завершения других HTTP-запросов, как в случае с иконочным шрифтом.

Лучшая доступность

SVG имеют встроенные специальные возможности, которые дают им преимущество перед использованием шрифтов-иконок.

• Семантически являются элементами изображения.
• Предоставить метаданные очень просто. Просто укажите элемент