Иконочные шрифты: Иконочные шрифты: преимущества и недостатки

Шрифт 

Содержание

Почему пора отказаться от иконочных шрифтов

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

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

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

Некорректные шрифты иконок

Вспышка нестилизованного контента (FOUC)

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Доступность

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

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

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

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

Размер и поддерживаемость

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

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

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

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

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

Шрифты иконок — это в первую очередь шрифты, а во вторую — иконки. Это означает, что ваши иконки наследуют правила CSS, такие как font-size, letter-spacing, line-height и т.д. Это может сделать позиционирование иконки более сложным и менее последовательным. Кроме того, глифы шрифтов значков являются монохромными, что означает, что любые стилистические изменения, которые вы вносите, влияют на весь глиф.

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

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

Иконки просто работают

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

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

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

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

Предоставить метаданные очень просто. Просто укажите элемент title или desc в контейнере SVG. А поскольку SVG — это просто элементы HTML, вы можете легко использовать атрибуты ARIA, например aria-labelledby.

Поддерживаемость

Если сравнивать один к одному, коллекция из 100 SVG по сравнению с WOFF2 из 100 иконок будет больше. Однако преимущества SVG легко перевешивают реализацию шрифтов иконок.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Примечание. Если вы создаете одностраничное приложение (SPA), обязательно изучите правильные методы разделения кода, чтобы уменьшить размеры пакетов.

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

Резкие изображения

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

Полный контроль CSS

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

Прочие соображения

Чтобы полностью поддержать использование SVG на вашем сайте, убедитесь, что вы следуете таким рекомендациям:

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

Включите сжатие — настройте сервер для отправки всех текстовых ресурсов (HTML, JS, CSS) с помощью Brotli (или GZIP).

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

Начните работу с иконками SVG

Большинство основных библиотек иконок предлагают пакеты SVG библиотеки. Две популярные библиотеки иконок, Material Design Icons и Font Awesome, имеют пакеты, которые можно установить через npm.

Если вы используете фреймворк, многие из основных библиотек иконок также выпустили пакеты, так что вы можете начать работу довольно быстро. Например, если вы используете React, для иконок Material Design и Font Awesome есть простые решения:

Иконки Material Design- @mdi/react & @mdi/js

import Icon from ‘@mdi/react’; import { mdiCoffee } from ‘@mdi/js’; const element = <Icon path={mdiCoffee} size={1} />;

import Icon from ‘@mdi/react’;

import { mdiCoffee } from ‘@mdi/js’;

 

const element = <Icon path={mdiCoffee} size={1} />;

Font Awesome — @fortawesome/react-fontawesome & @fortawesome/free-solid-svg-icons

import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’; import { faCoffee } from ‘@fortawesome/free-solid-svg-icons’; const element = <FontAwesomeIcon icon={faCoffee} />;

import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’;

import { faCoffee } from ‘@fortawesome/free-solid-svg-icons’;

 

const element = <FontAwesomeIcon icon={faCoffee} />;

Заключение

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

Автор: Michael Irigoyen

Источник: www.irigoyen.dev

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Использование шрифта Genericons на вашем сайте

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

В этой статье мы узнаем, как выглядят великолепные иконки и как использовать шрифт Genericons.

Важность Иконочных Шрифтов

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

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

Вот где иконки шрифты пригодятся.

Преимущества использования Icon Fonts

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

Не говоря о шутках, вот основные преимущества, которые вы можете получить с помощью шрифта значка:

  • Иконочные шрифты являются масштабируемыми. Это означает, что независимо от того, насколько велика ваша иконка, вам не нужно идти на компромисс по качеству изображения или размеру файла.
  • Иконочные шрифты могут быть улучшены с помощью простых строк CSS. Вам не нужно открывать свой большой старый редактор изображений, чтобы изменить их цвета или добавить к ним тени. Прозрачность? Проверьте. CSS градиенты? Проверьте. 3D вращение? Проверьте. Вы поняли идею. С помощью нескольких строк кода CSS вы можете делать практически все, что вы можете сделать со своим текстом. В конце концов, эти значки технически являются кусочками текста.
  • Иконочные шрифты имеют отличную поддержку браузера. Поскольку они являются шрифтами, и даже Internet Explorer 7 поддерживает шрифты, вам не нужно беспокоиться о том, не появятся ли они в старых браузерах.
  • Иконки шрифтов имеют небольшой размер. Это может звучать как спорный аргумент (поскольку пакет значков PNG может быть почти таким же маленьким, как и шрифты значков), но вы можете видеть, что формат Genericons в формате WOFF, например, имеет размер файла всего 11 КБ. Кроме того, вы должны включить такие вещи, как
    my-icon-2x.png     если вам нужны большие изображения. Кроме того, шрифты значков делают только один HTTP-запрос.
Набор иконок Genericons по состоянию на декабрь 2013 года

Использование Genericons

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

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

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

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

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

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

1

&lt;a class=&quot;genericon genericon-tablet&quot;

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

1

&lt;a href=&quot;http://tutsplus.

com/&quot;&gt;&lt;i class=&quot;genericon genericon-tablet&quot;&gt;&lt;/i&gt;

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

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

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

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

1

2

&lt;a class=&quot;genericond genericon genericon-tablet&quot;

&lt;a href=&quot;http://tutsplus. com/&quot;&gt;&lt;i class=&quot;genericond genericon genericon-tablet&quot;&gt;&lt;/i&gt;

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

1

&lt;a href=&quot;http://tutsplus.com/&quot;&gt;[genericon icon=tablet] This link has the tablet icon, too!&lt;/a&gt;

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

Вывод

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

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

podcast/177.

md at main · web-standards-ru/podcast · GitHub podcast/177.md at main · web-standards-ru/podcast · GitHub Permalink

 

Cannot retrieve contributors at this time
datetitlelanguagehostschapterstagspermalink

2019-05-28

Новости браузеров, font-display, иконочные шрифты, формы и клавиатура, доступность

ru

Ольга Алексашенко

Вадим Макеев

timetitle

42

Патреон и подкасты

timetitle

286

События

timetitle

742

Edge, Firefox, Blink

timetitle

1690

Font-display в Google Fonts

timetitle

2402

Иконочные шрифты

timetitle

2716

Формы и клавиатура

timetitle

3074

Доступные меню и кнопки

episode

false

Патреон и подкасты

События

Edge, Firefox, Blink

Font-display в Google Fonts

Иконочные шрифты

Формы и клавиатура

Доступные меню и кнопки

You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Иконочный шрифт FontAwesome: использование в Фотошопе

Иконочный шрифт Font Awesome — не единственный подобный шрифт, но весьма добротный по набору иконок в нем на все случаи жизни)

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

 

Но иконочный шрифт можно использовать не только на сайтах, его можно установить и на компьютер, например на ОС Windows) Что мне недавно и потребовалось.

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

В общем, задача выполнимая, но потребовалось разобраться.

Как установить Font Awesome на компьютер

Для начала зайдем на официальный сайт шрифта http://fontawesome.io/cheatsheet/ и скачаем архив с файлами шрифта, шрифт бесплатный, скачивается без проблем. Находим архив для загрузки, скачиваем, открываем архив и устанавливаем файлы с расширением .otf

Шрифт FontAwesome в данный момент подразделили на Solid (жирный) и regular (обычный).

Устанавливаем все предложенные шрифты, нажимая поочередно на файлы .otf — откроется установка шрифта на windows, нажмем на кнопочку «Установить» в левом верхнем углу — шрифт установится на компьютер. (Рис. ниже)

 

 

Как использовать шрифт Font Awesome в Photoshop?

Откроем фотошоп, затем откроем или создадим новое окно-изображение. Выберем инструмент «Текст», выберем в раскрывающемся списке шрифтов уже установленный FontAwesome. Затем нам снова потребуется перейти на официальный сайт шрифта, на ту самую страницу где представлены все иконки шрифта http://fontawesome. io/cheatsheet.

Там мы выбираем любую иконку.

Теперь внимание: обратим внимание на раздел SOLID или REGULAR. Если иконку выбрали из раздела Solid, то копируем саму иконку (выделяем саму иконку, изображение, не название и не юникод, и копируем в буфер).

Далее возвращаемся в фотошоп -> выбираем инструмент «Текст», ставим курсор в нужное место — > в окне шрифтов выбираем один из имеющихся у вас шрифов FontAwesome (free, brand).

И снова ВНИМАНИЕ: если иконку копировали на сайте из раздела Solid, то рядом с названием шрифта устанавливаем жирность вместо regular -> solid ! Это важно, иначе у вас отобразится просто прямоугольник. Если копировали значок из раздела Regular (там прозрачные контурные иконки), то проследим чтобы жирность шрифта была так же Regular. 

После этих предварительных действий на месте курсора вставляем иконку через «вставка»: меню-edit (редактирование) -paste (вставка) или правой кнопкой мыши выводим контекстное меню и «Встивить» (paste), либо просто используем сочетание клавиш CTRL+V (вставка скопированного объекта)

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

Читайте также в моём блоге:

Как скачать видео с сайта?

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

  • < Назад
  • Вперёд >

Иконочные шрифты Векторная графика на сайте

Обычно сайт создается в следующей последовательности

  1. Сначала выбирается или рисуется макет сайта в графическом редакторе
  2. Затем этот макет преобразуется в   html  код. Это процесс верстки сайта.
  3. Макет, полученный в процессе верстки наполняются содержанием (тексты, фотографии)

Таким образом Верстка сайта — это процесс создания веб-страницы по готовому макету. Обычно в качестве макета используется графический шаблон, созданный в программе Adobe Photoshop, он называется PSD (PhotoShop Document) шаблоном.

 Контент сайта — это вся информация размещённая на страницах сайта

Разработка сайта у нас  — это процесс создания макета, верстки сайта, и проработка способов размещения контента контент-менеджером или непосредственно заказчиком сайта.

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

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

Настала эра WEB 2.0, овальные стеклянные кнопки с тенями, отражающийся логотип с бликами, и прочие “прелести”. Так получилось, что избавившись от одной заразы, подцепили другую: растровые изображения.

Главная мысль использования векторной графики  заключается в том, что Интернет – векторный, и растровые изображения должны использоваться ТОЛЬКО для фотографий. По своей сути любой сайт – это интерфейс, и все интерфейсы должны быть векторными. С появлением highDPI дисплеев плохая верстка моментально детектируется при посещении сайта.

Запомните! Фотографии – растр, всё остальное вектор. Только векторные изображения способны обеспечить адаптивность сайта к любым устройствам и экранам.

Векторные изображения в формате SVG

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

Иконочный шрифт

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

Преимущества векторной графики

  • Векторная графика четко отображаются на всех экранах устройств
  • Легко масштабируется
  • Меньший размер по сравнению с растровыми изображениями
  • Возможность применения CSS стилей
  • Изменение дизайна сайта без перерисовки графики
  • Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
  • Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
  • Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
  • Анимация и редактирование: при помощи javascript можно анимировать SVG
  • Малый размер: объекты SVG весят намного меньше растровых изображений.

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

177. Новости браузеров, font-display, иконочные шрифты, формы, доступность |

28 мая 2019: Edge, Firefox, Blink, font-display в Google Fonts, иконочные шрифты, формы и клавиатура, доступные меню, кнопки и картинки.

— Ольга Алексашенко
— Вадим Макеев

Содержание

00:00:42 Патреон и подкасты
00:04:46 События
00:12:22 Edge, Firefox, Blink
00:28:10 Font-display в Google Fonts
00:40:02 Иконочные шрифты
00:45:16 Формы и клавиатура
00:51:14 Доступные меню и кнопки

Слушайте:
iTunes — https://itunes.apple.com/podcast/id1080500016
ВКонтакте — https://vk.com/podcasts-32017543
Яндекс.Музыка — https://music.yandex.ru/album/6245956
Spotify — https://open.spotify.com/show/3rzAcADjpBpXt73L0epTjV
Ютуб — https://www.youtube.com/playlist?list=PLMBnwIwFEFHcwuevhsNXkFTcadeX5R1Go
SoundCloud — https://soundcloud.com/web-standards
RSS — https://web-standards.ru/podcast/feed/

Читайте:
Твиттер — https://twitter.com/webstandards_ru
ВКонтакте — https://vk.com/webstandards_ru
Фейсбук — https://www.facebook.com/webstandardsru
Телеграм — https://t.me/webstandards_ru

Поддержите:
Патреон — https://www.patreon.com/webstandards_ru
Яндекс. Деньги — https://money.yandex.ru/to/41001119329753
PayPal — https://www.paypal.me/pepelsbey

Обсуждайте: http://slack.web-standards.ru/

Патреон и подкасты

Патреон «Веб-стандартов» — https://www.patreon.com/webstandards_ru
Подкасты про веб-разработку — https://github.com/web-standards-ru/podcasts-list

События

HolyJS в Питере 24–25 мая — https://holyjs-piter.ru/
Frontend Conf в Москве 27–28 мая — https://frontendconf.ru/
JavaScript Party в Новосибирске 30 мая — https://events.yandex.ru/events/meetings/30-may-2019/
CSSconf в Берлине 31 мая — https://2019.cssconf.eu/
JSConf в Берлине 1–2 июня — https://2019.jsconf.eu/
React Russia в Москве 1 июня — https://axept.timepad.ru/event/971209/
ReactRussia в Выборге 22 июня — https://reactrussia.timepad.ru/event/906356/
FED meetup #1 в Днепре 1 июня — https://www.facebook.com/events/897426583761081/
Tver.io Girl Power Meetup в Твери 13 июня — https://www.meetup.com/tverio/events/261105807/
Ember. js Meetup #4 в Питере 14 июня — https://ember-js-spb.timepad.ru/event/981196/

Edge, Firefox, Blink

Microsoft Edge preview builds for macOS — https://blogs.windows.com/msedgedev/2019/05/20/microsoft-edge-macos-canary-preview/
Firefox 67 — http://tanalin.com/blog/2019/05/firefox-67/
CSS Grid subgrid lands in Firefox Nightly — https://rachelandrew.co.uk/archives/2019/05/23/css-grid-subgrid-lands-in-firefox-nightly/
Blink‎ LayoutNG — https://www.chromium.org/blink/layoutng

Font-display в Google Fonts

Google Fonts is Adding font-display — https://www.zachleat.com/web/google-fonts-display/
Monica’s font-display explainer — https://font-display.glitch.me/

Иконочные шрифты

Font-display is Incompatible with icon fonts — https://www.zachleat.com/web/font-display-icon-fonts/

Формы и клавиатура

Everything You Ever Wanted to Know About inputmode — https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

Доступные меню и кнопки

Инклюзивные компоненты: меню и кнопки меню — https://medium. com/p/7f3aa1ad008d
Accessible Icon Buttons — https://www.sarasoueidan.com/blog/accessible-icon-buttons/
Contextually Marking up accessible images and SVGs — https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Иконки шрифты потрясающие для вашего сайта: вот почему

Вы слышали о значках и почти наверняка слышали о шрифтах, но что такое Icon Font ? Сегодня я покажу вам, что такое шрифты значков и как вы можете использовать их для оживления вашего сайта. Давайте начнем.

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

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

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

Начиная

Я буду использовать Font Awesome для этих примеров, но теория может быть применена ко многим другим пакетам шрифтов.

Вот стартовый HTML:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MUO Icon Fonts</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> html { font-family: helvetica, arial; } </style> </head> <body> </body> </html>

Это минимальное количество HTML, необходимое для создания веб-страницы. Я не буду объяснять большинство из них, поскольку мы рассмотрели это в нашем руководстве о том, как сделать сайт .

Наиболее важной строкой является следующее:

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

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

Вот основное использование. Поместите это в теги вашего тела :

 <i></i> My First Icon

Вот как это выглядит:

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

Попробуйте поменять иконку с винтика на любую другую.

Идти глубже

Как только вы знаете основы, пришло время для некоторых продвинутых трюков.

Если вы не хотите писать свой собственный CSS, вы можете использовать стили, встроенные прямо в Font Awesome. Есть много классов, которые вы можете использовать, чтобы сделать иконки больше:

 <i></i> <i></i> <i></i> <i></i> <i></i>

Еще один полезный класс — fa-spin . Это заставит вас вращать иконки, а в сочетании с предыдущими классами размера вы можете создать несколько приятных эффектов. Вот код:

 <i></i>

Вот результат:

Вращать иконки легко — используйте класс fa-rotate :

 <i></i> <i></i> <i></i> <i></i>

Число в конце определяет степень поворота значка, но не увлекайтесь. Вы ограничены до 90 , 180 или 270 .

Последний трюк, который вы можете сделать, это сложить. Класс fa-stack позволяет вам комбинировать две или более иконки вместе. Вот код:

 <span> <i></i> <i></i> </span> <span> <i></i> <i></i> </span> <span> <i></i> <i></i> </span> <span> <i></i> <i></i> </span>

Вот как это выглядит:

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

Пользовательские CSS

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

Вот HTML-код для этой иконки:

 <i></i>

Вот CSS:

 @keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } .bike { animation-name: move; animation-duration: 4s; }

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

Вы можете сделать некоторые специальные вещи, если вы действительно хотите:

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

 <i></i> <i></i> <i></i> <i></i>

Вот CSS:

 @keyframes fade { from { opacity: 0; } to { opacity: 1; } } . person { opacity: 0; animation-name: fade; } #p1 { color: red; animation-duration: 2s; } #p2 { color: orange; animation-duration: 4s; } #p3 { color: green; animation-duration: 6s; } #p4 { animation-duration: 8s; }

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

Это все на сегодня. Теперь вы сможете использовать Icon Fonts для оживления вашего сайта! Если вы пока не уверены в своих навыках, посмотрите эти сайты-шаблоны или эти каналы на YouTube для начала с веб-дизайном.

Вы узнали что-нибудь новое сегодня? Какой твой любимый Icon Font? Дайте нам знать в комментариях ниже!

Иконочных шрифтов · GitHub

Иконочных шрифтов · GitHub

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

17 репозиториев 5 языков Последнее обновление 29 сен.2014

  • FortAwesome / Font-Awesome

    Знаменитый набор инструментов SVG, шрифтов и CSS

  • ionic-team / ionicons

    Созданные вручную иконки премиум-класса, созданные Ionic, для приложений Ionic и веб-приложений повсюду 🌎

  • somerandomdude / Iconic

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

  • MfgLabs / mfglabs-iconset

    Великолепная иконка веб-шрифта от MFG Labs

    CSS 780 85 Обновлено 26 июля 2016 г.

  • parkerbennett / stackicons

    Иконочный шрифт и конструктор на основе Sass для Stackicons-Social, который поддерживает несколько форм кнопок и уникальную «многоцветную» опцию в CSS для более чем 60 социальных брендов.

    CSS 974 123 Обновлено 23 апреля 2018 г.

  • fontello / brandico.font

    Шрифт с логотипами социальных сервисов и мессенджеров

    HTML 304 63 Обновлено 20 октября 2016 г.

  • pfefferle / openwebicons

    Шрифт!

    HTML 842 157 Обновлено 12 ноя. 2021 г.

  • stephenhutchings / typicons.шрифт

    Идеальные универсальные векторные иконки на 336 пикселей в наборе веб-шрифтов

  • smcllns / css-социальные-кнопки

    Zocial: CSS логин и социальные кнопки

  • Keyamoon / IcoMoon-Free

    Пакет плоских векторных иконок вместе с устанавливаемым лигатурным шрифтом

  • Скоттдеджонге / map-icons

    Шрифт значков для использования с Google Maps API и Google Places API с использованием маркеров SVG и меток значков.

  • jhogue / PE-Analog-Clock-icon-font

    Набор иконок для отображения наглядного («аналогового») представления меток времени.

    HTML 295 25 Обновлено 12 февраля 2016 г.

  • erikflowers / погодные иконки

    215 значков погоды и CSS

  • BanzaiTokyo / webhostinghub-глифы

    WebHostingHub Glyphs — это полный набор значков глифов, доступных в виде шрифта, полностью совместимый с Bootstrap и другими фреймворками и CMS

    272 30 Обновлено 29 июля 2013 г.

  • грунтовка / октикон

    Масштабируемый набор иконок, созданных вручную с помощью <3 на GitHub

    JavaScript 7 013 722 Обновлено 22 ноября 2021 г.

  • google / material-design-icons

    Иконки материального дизайна от Google

  • xtoolkit / Micon

    Micon, культовый шрифт Windows 10 и набор инструментов CSS.

    CSS 192 30 Обновлено 18 февраля 2019 г.
Вы не можете выполнить это действие в настоящее время. Вы вошли в систему с другой вкладкой или окном.Перезагрузите, чтобы обновить сеанс. Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

❍ Иконка Шрифт

Создание пользовательских шрифтов

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

Результаты Pixel Perfect

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

Бесплатные иконки, бесплатное приложение

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

Awesome Iconography Tool

Приложение IcoMoon — это усовершенствованный инструмент для создания иконок.Он позволяет сортировать значки, управлять коллекциями значков или делать значки доступными для поиска, добавляя к ним теги. Помимо шрифтов, вы можете создавать значки в PNG, SVG, полимерные значки, PDF-файлы, CSH, XAML и CSS-спрайты любого размера и цвета по вашему желанию.

Импорт собственных векторов

В приложении IcoMoon вы можете импортировать собственные векторы (изображения SVG или шрифты SVG). Импорт иконок происходит локально в вашем браузере. Ваши векторы не будут загружены на наши серверы при их импорте.Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.

Работает в автономном режиме

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

Множественные лигатуры на символ

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

15+ лучших иконочных шрифтов для веб-дизайна и дизайна пользовательского интерфейса (бесплатно + премиум)

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

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

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

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

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

Ionicons — еще один набор креативных иконок с минималистичным и простым дизайном. Этот значок шрифта разработан специально для разработки веб-интерфейса и дизайна мобильного пользовательского интерфейса и совместим с платформами iOS и Android. Всего в нем более 1100 иконок. Он находится под лицензией MIT с открытым исходным кодом

.

Это коллекция уникальных значков с современным минималистским дизайном. Он включает 150 различных значков, которые вы можете использовать в различных дизайнах электронной коммерции. Иконки доступны в форматах EPS, AI, SVG, а также в виде значков со шрифтами.

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

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

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

Fontisto — еще один отличный бесплатный иконочный шрифт с набором современных и стильных иконок в нескольких категориях.Значки полностью масштабируемы и отлично смотрятся на дисплеях Retina. Его также можно совершенно бесплатно использовать с коммерческими проектами.

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

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

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

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

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

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

Captain Icon — это современный шрифт с более чем 350 уникальными дизайнами иконок. Иконки идеально подходят для создания как веб-интерфейсов, так и мобильных пользовательских интерфейсов.Иконки бывают разных форматов, включая EPS, SVG, PSD и версии шрифтов значков.

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

Entypo — бесплатный иконочный шрифт с минималистичным и чистым дизайном. Этот пакет включает более 400 иконок. Несмотря на то, что шрифт не обновлялся какое-то время, значки актуальны и сегодня.

Этот бесплатный шрифт иконок от Pixelden включает 200 уникальных иконок с тонкими линиями. Дизайн каждого значка вдохновлен iOS 7. Этот шрифт значка больше всего подходит для дизайна веб-сайтов и веб-приложений.

5 советов по выбору шрифта для иконок

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

1. SVG-иконки и иконочные шрифты

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

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

2. Убедитесь, что он отзывчивый

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

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

3. Выберите подходящие темы

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

4. Цвета и индивидуальная настройка

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

5. Бесплатные и премиальные иконочные шрифты

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

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

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

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

Вы всегда можете поискать в Интернете и выбрать значки с множества веб-сайтов, потому что, если у вас нет времени на создание, у вас должно быть время для поиска. Нет?

Вздох … ну тогда ладно. Когда вы дизайнер, имея под рукой ресурсы и шрифты, вы можете выполнять свои проекты намного быстрее. Чтобы помочь, мы покопались за вас и составили список из 20 лучших бесплатных шрифтов для иконок для дизайна пользовательского интерфейса, чтобы вы могли создать набор ресурсов, который вы сможете использовать на долгие годы.

Итак, если вы готовы начать, давайте продолжим!

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

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

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

Набор иконок Trendy Thin Line Icon для Интернета и мобильных устройств

Хотите ли вы создавать значки, календари, этикетки, упаковку или любой другой дизайн — шрифт Trendy Thin Line Icon Kit для Интернета и мобильных устройств от fet — лучший вариант, который идеально впишется практически в любой модный дизайн. 100% векторный шрифт, он полностью редактируется в Adobe Illustrator. Еще одна интересная особенность этого шрифта — все элементы шрифта наложены друг на друга и хорошо организованы.

Иконки Themify

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

Pictypo

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

Значок ремикса

Remix Icon — это система с открытым исходным кодом, выполненная в нейтральном стиле. Это идеальный шрифт для дизайнеров и разработчиков, которые могут использовать их в своих пользовательских интерфейсах.Состоящий из более чем 2200 значков, каждый из них был идеально продуман, с единообразием, удобочитаемостью и идеальными пикселями. Созданные Remix Design значки имеют вид контуров и заполняются стилями в сетке. Универсальность значков ремиксов позволяет использовать их по своему усмотрению для любых личных и коммерческих нужд.

Иконки векторные линии и шрифт

Иногда иметь слишком много чего-то — это хорошо. Набор векторных линейных значков и шрифтов включает 130 векторных линейных значков, совместимых с Affinity, Affinity Designer и Adobe Illustrator, и предоставляет вам варианты в нескольких форматах, включая AI, PDF, EPS, AFDESIGN и SVG.Вы также получаете пакет шрифтов значков, который включает файлы TTF, SVG, EOT и WOFF.

Шрифты Wirebet

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

Зондиконс

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

Шрифты Foundation Icon 3

Набор Foundation Icon Fonts 3, разработанный ZURB, с настраиваемой коллекцией из более чем 275 значков, позволяет настраивать размер, цвет и даже стиль с помощью CSS. Набор, хранящийся в удобном веб-шрифте, является прекрасным примером чистой геометрии. Это в значительной степени связано с тем, что каждый значок был создан в общих формах, таких как треугольники, квадраты, круги и прямоугольники.Благодаря таким функциям, как закругленные углы, толстые линии, а также полная масштабируемость, которая позволяет помещать его в маленькие и большие размеры, набор Fonts 3 идеально подходит для любого проекта

.

Linea Иконки

Набор иконок Linea Icon включает такие категории, как базовые, музыкальные и другие значки, всего более 750 значков, которые вы можете использовать в своих проектах. В набор входят значки во многих различных форматах, включая SVG, шрифт значков и PNG64.

Каркасные значки

Набор иконок Wireframe, состоящий из более чем 200 линейных иконок, является идеальным вариантом для создания каркасов.Совместимый с Adobe Photoshop, Illustrator и другими, набор включает значки в форматах AI, PDF, PSD и SVG, любой из которых может быть идеальным для любого проекта, над которым вы работаете.

мкм

Разработанный специально для пользовательского интерфейса и состоящий из более чем 100 значков, набор Micron имеет все основные стили глифов, которые, вероятно, будут использоваться почти в 99% проектов. Каждый значок в этом шрифте разработан с максимальной согласованностью и построен на сетке из 512 единиц и разделен на 16 × 16 ячеек.Его лигатуры придают уникальность и работают в обоих направлениях. Вы также получите шпаргалку, которую можно использовать для быстрого ознакомления.

77 Основные иконки

Разработанный Брином Тейлором, этот шрифт поставляется с пакетом из 77 бесплатных основных значков. Вы можете найти значки в форматах AI, PDF, PSD, PNG и SVG. Используя шрифт, вы можете легко изменить цвет любого значка. Этот шрифт с идеальной точностью до пикселя поставляется с бесконечно масштабируемыми векторами, которые можно использовать для любых личных и коммерческих целей.

Line Flat шрифт + линейный плоский значок

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

Коллекция искусных шрифтов (24 шрифта)

Crafty Font относится к семейству шрифтов без засечек. Он имеет нормальный моноширинный, уплотненный и увеличенный интервал, поэтому он идеально подходит для использования в различных конструкциях. В нем есть коллекция из 24 шрифтов, таких как обычный, контурный, в горошек, шеврон, каракули, звезды и другие, которые вы можете оптимизировать для любого размера. Совместим со многими приложениями, включая Photoshop, Illustrator и даже Microsoft Word.

80 мини-иконок (PSD + шрифт Icon)

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

150 обведенных значков — PSD AI SVG Webfont

Созданные Дарио Фернандо 150 обведенных значков — PSD AI SVG Webfont — это простой, но полезный набор значков, включающий PSD, AI, нарезанные форматы SVG. Если вы ищете идеальный значок для веб-сайта, вам стоит обратить внимание на этот шрифт.

Иконки погоды

Шрифт Weather Icons, состоящий из более чем 200 значков погоды в виде значков и стилей CSS, был создан для проектов с темой погоды.Независимо от того, нужны ли вашему проекту высококачественные значки погоды, значки морской тематики или значки метеорологии, это лучший вариант практически для любой темы погоды. Предлагает встроенный API, который совместим с Yahoo Weather, Всемирной метеорологической организацией, OpenWeatherMaps и другими популярными погодными приложениями.

Специальные значки в этом наборе значков включают около 28 фаз Луны и 12 часов на часах. Значки поставляются с файлами OTT и TTF, которые можно легко использовать в дизайнерских приложениях, таких как Photoshop, Illustrator и Sketch.Еще одна интересная особенность этого шрифта — это свобода использования его стиля CSS, который помогает масштабировать, вращать, переворачивать, добавлять тени и даже изменять цвета значков.

Бесплатные Иконки Шрифт

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

Captain Icon — 350 бесплатных векторных иконок

Если вы хотите создавать невероятные мобильные и веб-дизайны, то вам стоит обратить внимание на шрифт Captain Icon.Шрифт Captain Icon с более чем 350 векторными значками, которые можно оптимизировать до любого размера без потери качества, доступен в форматах EPS, PSD, PNG, SVG и веб-шрифтов. Это идеальный выбор для использования в широком диапазоне категорий, таких как дизайн, спорт, социальные сети, офис, погода и многое другое.

Набор иконок MFG Labs

Этот готовый к сетчатке глаза шрифт состоит из векторов, и его можно легко встроить на веб-сайт или в приложение с помощью Webfont и CSS. Шрифт MFG Labs Icon, легко масштабируемый на экранах сетчатки или мобильных дисплеях, поставляется с частным использованием Unicode, чтобы избежать любых конфликтов с существующими в настоящее время символами.

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

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

Шрифт Esri Icon (тема Calcite) | Обзор | ArcGIS API для JavaScript 4.21

Шрифт Esri Icon Font — это набор монохромных значков, который используется в Esri для согласованной фирменной темы Esri.

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

Для 2D MapViews, иконки Esri Icon Fonts доступны в размещенных файлах шрифтов в формате .pbf . Эти шрифты доступны по адресу https://static.arcgis.com/fonts . URL-адрес можно настроить так, чтобы он указывал на ваши собственные ресурсы шрифтов, установка esriConfig.fontsUrl свойство.

Для получения дополнительной информации о веб-разработке и шрифтах см. Основные стили текста и шрифтов и статьи Сети разработчиков веб-шрифтов Mozilla.

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

Одним из возможных вариантов использования иконочных шрифтов Esri является их использование в качестве символа. свойство Graphic. В приведенном ниже фрагменте кода TextSymbol создается путем указания цвет, текст, и шрифт. Шрифт свойство создается путем автоматического преобразования класса Font.

Для 2D MapViews и 3D SceneViews, Шрифт.Семейство шрифтов Esri Icon Font — CalciteWebCoreIcons .

Дополнительную информацию см. В примере «Использование шрифтов Esri Icon Fonts с графикой карты». Полный список значений Unicode см. В разделе «Имена классов CSS и значения Unicode» в этом разделе.

Копия

   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  const 2DtextSymbol = new TextSymbol ({
  цвет: '# 7A003C',
  текст: '\ ue61d', // значок-карта-значок esri
  font: {// автоматическое преобразование как новый Font ()
    размер: 24,
    семейство: 'CalciteWebCoreIcons'
  }
});

const 3DtextSymbol = new TextSymbol ({
  цвет: '# 7A003C',
  текст: '\ ue61d', // значок-карта-значок esri
  font: {// автоматическое преобразование как новый Font ()
    размер: 24,
    семейство: 'CalciteWebCoreIcons'
  }
});

Использование значков шрифтов Esri в качестве метки

Еще одно возможное применение значков шрифтов Esri — их использование в качестве шрифта.семья свойство класса Label. В приведенном ниже фрагменте кода LabelClass создается путем автоматического преобразования тип символа как текст , цвет и шрифт. Наконец, мы определили labelPlacement и labelExpressionInfo, поскольку мы будем работать с FeatureLayer. Мы могли бы также использовать labelExpression если бы мы работали с MapImageLayer.

Копия

   1
2
3
4
5
6
7
8
9
10
11
12
13
14
  const labelClass = {// автоматически передается как новый LabelClass ()
  условное обозначение: {
    type: 'text', // автоматически передается как новый TextSymbol ()
    цвет: 'зеленый',
    font: {// автоматическое преобразование как новый Font ()
      семейство: 'CalciteWebCoreIcons',
      размер: 12
    }
  },
  labelPlacement: 'вверху слева',
  labelExpressionInfo: {
    выражение: '"\ ue61d"' // значок-карта-значок esri
  }
};

Имена классов CSS и значения Unicode

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

esri-icon-drag-horizontal

esri-icon-handle-horizontal

esri-icon-handle-vertical

esri-icon-left-треугольник-стрелка

esri -icon-правый-треугольник-стрелка

esri-icon-overview-arrow-arrow-bottom-left

esri-icon-overview-arrow-bottom-right

esri-icon-overview-arrow- верхний левый

esri-icon-overview-arrow-top-right

esri-icon-checkbox-unchecked

esri-icon-checkbox-checked

esri-icon-radio- не отмечен

esri-icon-up-arrow-circle-обведен —

—

—-esri-icon-down-arrow -нут-окружен

esri-icon-left-arrow-кружком

esri-icon-right- обведен стрелкой

esri-icon-notice-треугольник

esri-icon-arr ow-up-кружка

esri-icon-arrow-down-кружка

esri-icon-arrow-left-кружка

esri-icon-arrow-right-кружка

esri- icon-configure-popup

esri-icon-environment-settings

esri-icon-loading-indicator

esri-icon-повторная отправка приглашения

esri-icon-zoom-in- увеличительное стекло

esri-icon-zoom-out-увеличительное стекло

esri-icon-north-navigation

esri-icon-unlocked-link-vertical

esri-icon- link-horizontal

esri-icon-unlocked-link-horizontal

esri-icon-cta-link-external

esri-icon-launch-link-external

esri-icon- эскиз-прямоугольник

esri-icon-north-navigation-fill

esri-icon-sliders-horizontal

esri-icon-elevation-profile

esri-icon-measure-building-height-shadow

Знакомство с иконочными шрифтами с Font Awesome и IcoMoon

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

Я продемонстрирую великие вещи, которых мы можем достичь с помощью шрифтов со значками, но сначала я рассмотрю, что такое шрифты с иконками и каковы их плюсы и минусы. Затем мы рассмотрим два популярных шрифта значков и увидим различные примеры, показывающие, как мы можем использовать их в наших проектах.

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

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

Плюсы и минусы иконочных шрифтов

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

  • К ним можно применять любые эффекты CSS.
  • Поскольку это векторная графика, они масштабируемы. Это означает, что вы можете увеличивать или уменьшать их масштаб без потери качества.
  • Вы отправляете один или несколько HTTP-запросов для их загрузки вместо нескольких HTTP-запросов, которые могут потребоваться для растровых изображений.
  • Они быстро загружаются из-за своего небольшого размера.
  • Они поддерживаются всеми браузерами (даже начиная с IE6).

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

Они также обычно ограничиваются одним цветом, если вы не применяете некоторые хитрости CSS.Более того, шрифты иконок разрабатываются в соответствии с конкретными сетками, например 16px16, 32 × 32, 48 × 48 и т. Д. Если по какой-то причине вы измените систему сетки на 25 × 25, вы, вероятно, не получите четких результатов (конкретный CSS свойства также могут помочь).

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

В оставшейся части этой статьи мы рассмотрим основы следующих двух библиотек шрифтов значков:

Мы покажем четыре различных примера, в которых используются шрифты со значками.

Font Awesome Icons

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

Начало работы с Font Awesome

Самый простой способ включить Font Awesome в ваш проект — через сеть доставки контента (CDN).Однако если вы работаете в автономном режиме, вам необходимо загрузить набор значков.

Вы также должны найти и включить файл CSS и папку сгенерированных шрифтов, содержащую различные форматы шрифтов. Затем вам нужно добавить файл CSS в свой HTML-документ. Наконец, вы должны убедиться, что URL-пути @ font-face src в вашем файле CSS соответствуют соответствующей папке. Полный список всех возможных способов установки этих значков для ваших проектов см. В их руководстве по началу работы.

Чтобы использовать значки, вы должны разместить их внутри элемента span или i . Затем вы должны назначить им два класса. Класс fa плюс второй класс, который должен быть именем значка, который вы хотите добавить в свой проект, например fa-home . В их шпаргалке вы можете увидеть названия всех доступных значков в пакете.

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

Давайте теперь посмотрим на три различных примера, в которых используется набор значков Font Awesome.

Font Awesome, пример # 1

В этом первом примере мы создаем вертикальное меню навигации. Сначала мы оборачиваем значки внутри элемента i и удваиваем их размер относительно размера их контейнера, используя предопределенный класс fa-2x . Затем мы стилизуем их с помощью CSS.

HTML-код для двух элементов навигации будет выглядеть так:

  
  • 
    
         
    

    • 

  • 
    
         
    

    •

    А вот соответствующий CSS:

      nav li {
    фон: #ededed;
    высота: 80 пикселей;
    ширина: 80 пикселей;
    высота строки: 80 пикселей;
    выравнивание текста: центр;
}

nav li: not (: first-child) {
      маржа сверху: 1px;
}

nav li a {
    наброски: нет;
    положение: относительное;
    ширина: 100%;
    высота: 100%;
}

nav i {
    цвет: стально-голубой;
    вертикальное выравнивание: по центру;
}

nav li a: after {
    фон: #ededed;
    содержимое: attr (имя-данных);
    дисплей: нет;
    маржа слева: 1px;
    ширина: 160 пикселей;
    высота: 80 пикселей;
    слева: 80 пикселей;
    позиция: абсолютная;
    размер шрифта: 1.2em;
}

nav li a: hover: after {
    дисплей: встроенный блок;
}

    И результат в демонстрации ниже:

    См. Пример №1 шрифта Pen Font Awesome Icon Font от SitePoint (@SitePoint) на CodePen.

    Font Awesome, пример # 2

    В следующем примере мы создадим простую панель социальной сети. Для этого мы оборачиваем значки внутри элемента i и удваиваем их размер относительно размера их контейнера, используя предопределенный класс fa-2x .Затем мы стилизуем их с помощью CSS.

    HTML-код для одного значка будет выглядеть так:

    И CSS для стилизации значков:

      раздел а {
  отступ: 7 пикселей;
  черный цвет;
}

section i {
  вертикальное выравнивание: по центру;
  переход: цвет .3s легкость вставки-наружу;
}

раздел a: nth-child (1): hover i {
  цвет: # 3b5998;
}

    Вот демонстрация:

    См. Пример № 2 шрифта Pen Font Awesome Icon Font от SitePoint (@SitePoint) на CodePen.

    Font Awesome, пример # 3

    В этом третьем примере мы используем значки в форме входа в систему. Мы используем значки так же, как и в предыдущих примерах. Мы просто применяем еще один предопределенный класс fa-fx к иконкам, чтобы установить им фиксированную ширину (приблизительно 1,25em).

    HTML и CSS аналогичны предыдущим примерам, и вот результат:

    См. Пример № 3 шрифта Pen Font Awesome Icon Font от SitePoint (@SitePoint) на CodePen.

    Обратите внимание на значки, используемые в форме, а также на социальных ссылках.

    Иконки IcoMoon

    IcoMoon — еще одно популярное решение для шрифтов с иконками. Он поставляется с двумя пакетами значков, одним с открытым исходным кодом и одним премиум (основные и окончательные варианты). Для получения дополнительной информации об этих пакетах перейдите сюда. В зависимости от выбранного вами пакета количество и формат доступных значков будут разными. Например, количество иконок в бесплатном пакете — 450, а в окончательном — 1266.

    Помимо этих пакетов, IcoMoon предоставляет онлайн-приложение, в котором вы можете искать и бесплатно загружать более 3500 иконок.Это приложение предоставляет несколько основных параметров редактирования, в том числе возможности поворота, изменения цвета и т. Д.

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

    Начало работы с IcoMoon

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

    Как только вы загрузите значки, вы должны включить в свои проекты файл CSS и папку сгенерированных шрифтов, содержащую различные форматы шрифтов, и убедиться, что URL-пути @ font-face src в вашем файле CSS соответствуют соответствующую папку.

    Существует также возможность быстрой ссылки для использования, которую вы можете напрямую добавить в свой HTML-документ (воспринимайте ее как ссылку на CDN), после чего вы сможете использовать выбранные значки. Однако эта опция постоянна только для премиальных планов.Базовый план также предлагает эту опцию, но использование ограничено одним днем.

    Подобно значкам font awesome, чтобы использовать значки IcoMoon, вы должны поместить каждую из них внутри элемента span . Затем вам нужно назначить класс, который должен быть именем значка, который вы хотите добавить в свой проект, например icon-home . Вы также можете настроить имена значков (вместо префикса по умолчанию вы можете установить свой собственный префикс) на вкладке «Настройки» перед загрузкой шрифтов значков.

    Давайте посмотрим на пример.

    Пример IcoMoon

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

    HTML для двух значков выглядит так:

      
  • 
     
    Анализировать

    • 

  •  + 
    • 

  • 
     
    Дизайн

    • 

  •  + 
    •

    Наш CSS:

      section li: nth-child (even) {
  цвет: #ededed;
  ширина: 6%;
  размер шрифта: 2.5em;
  высота: 63 пикс;
  верхнее поле: 31,5 пикселей;
  высота строки: 63 пикселей;
}

section span {
  отступ: 15 пикселей 0;
  размер шрифта: 5em;
  дисплей: блок;
  цвет: стально-голубой;
  переход: все .2s легкость входа-выхода;
}

section li: hover span {
  преобразовать: translateY (-10px);
}

    И демо:

    См. Пример шрифта значка Pen IcoMoon от SitePoint (@SitePoint) на CodePen.

    Заключение

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

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

    Две важные причины, по которым иконочные шрифты не мертвы

    Множество статей в Интернете сравнивают использование шрифтов значков и SVG. Некоторые статьи, опубликованные на уважаемых сайтах, таких как CSS-Tricks и Sitepoint, выступают против шрифтов Icon, а некоторые — в их пользу.Это жаркие споры, но, по-видимому, «современное» мнение состоит в том, что использование SVG-спрайтов — лучший и более гибкий вариант, в то время как шрифты с иконками — это просто «хитрость».

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

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

    Чтобы дать вам представление о том, что мы сравниваем, вот два фрагмента кода, которые вам нужно определить в разметке, чтобы отображать одну общую папку в ссылке Twitter со значком при использовании спрайтов SVG.Сначала вы должны определить свой набор значков в теге:

    < svg style = "дисплей: нет;" >

    < символ id = "twitter-icon" viewBox = "0 0 32 32" >

    < путь d = "M32 6.076c-1.177… " заполнить = " # 42c0fb " > путь >

    символ >

    svg >

    Далее вам нужно поместить эту разметку там, где вы хотите разместить ссылку:

    < a href = "#" class = "twitter-icon" >

    < svg >

    < использовать xlink: href = "# twitter-icon" > использовать >

    < svg >

    Поделиться в Twitter

    a >

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

    < a href = ”#” class = "twitter-icon" > Поделиться в Twitter a >

    Дилемма SVG и Icon Font

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

    Причина 1: Размер и скорость

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

    Кэшируемый

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

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

    Одним из недостатков является то, что для значков шрифтов требуется дополнительный HTTP-запрос, но это несущественно, если у ваших пользователей есть браузеры, поддерживающие HTTP / 2.Когда я писал это сообщение в блоге, почти 80% браузеров действительно поддерживают HTTP / 2. Если протокол не поддерживается, запрос будет загружен только один раз на первую страницу вашего сайта.

    ПРИМЕЧАНИЕ. Спрайты SVG не всегда должны быть встроены на страницу; они могут быть одним внешним файлом. Однако для поддержки всех версий браузеров необходимо включить полифилл.

    Лучшая производительность

    Производительность SVG-спрайтов после их загрузки также ниже, чем у шрифтов со значками.Вероятно, это связано с тем, что SVG являются элементами в дереве DOM, и браузеры, похоже, испытывают трудности с их перерисовкой и манипуляциями, когда они появляются на экране. Адди Османи, инженер Google Chrome, написала в Твиттере: «Кроме того, качество шрифтов значков в Chrome составляет ~ 5x SVG атм». Другие эксперименты показывают, что «частота кадров была лучшей для иконок шрифтов и худшей для встроенных SVG». По словам автора этой статьи: «С точки зрения производительности [иконочные шрифты] кажутся наиболее эффективными».

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

    Причина 2 - Внешний вид и гибкость

    Если вы используете значки в качестве визуальных улучшений с чисто декоративными целями, вы можете упустить ту гибкость, которую они могут предложить. В недавней статье о CSS-Tricks обсуждается, являются ли значки содержимым, но упускается замечательная особенность шрифтов значков: возможность добавлять значки к элементам, которые соответствуют определенным критериям, без написания дополнительной разметки HTML. И, по словам дизайнера Джона Хикса, «Иконки - это больше, чем просто красивая графика для сайтов и приложений; они маленькие чудотворцы.Они резюмируют и объясняют действия, дают направление, предлагают обратную связь и даже преодолевают языковые барьеры ».

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

    a [href $ = ".pdf" ]: перед {...}

    или для автоматической пометки внешних ссылок в блоге Дэвида Уолша:

    a [href * = "//" ]: not ([href * = "mysite.com " ]): до {...}

    Поскольку в этом методе используется только CSS, его легко изменить. Чтобы добиться того же с SVG-спрайтами, вам придется либо полагаться на специально созданный серверный сценарий, который изменяет разметку перед публикацией страницы, либо создавать функцию JavaScript для изменения HTML-кода на компьютере пользователя после остальной части страница загружена, что может привести к неудовлетворительным результатам.

    Итак, иконочные шрифты лучше?

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

    Шрифты

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

    .

    No related posts.

    Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *