TLDR: если вы используете значок во встроенном контексте (рядом с текстом) или используете несколько разных значков, предоставьте его в качестве шрифта.

Если нет, то дайте им изображение (желательно в формате SVG!)

Длинный ответ

О чем думают разработчики, когда смотрят спецификации дизайна

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

Типы отображения элементов HTML

В HTML есть много типов элементов : блочный уровень и встроенный являются основными контекстами отображения, которые здесь играют роль. Есть и другие, такие как встроенный блок, гибкость, сетка и другие. Разработчик должен посмотреть на ваш дизайн и предположить контекст каждой части, используя теги HTML и/или стили CSS, чтобы сопоставить тип отображения отображаемого элемента с контекстом его использования.

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

Почему иконочные шрифты полезны для разработчиков

(Потому что они действительно не имеют никакой цели для дизайнеров)

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

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

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

Я думаю, что иконочные шрифты довольно круты. Мне очень нравится с ними работать, и я думаю, что в большинстве случаев это совершенно нормально. Однако у них есть один существенный недостаток.

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

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

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

Проще говоря, если вы не собираетесь вручную устанавливать высоту строки каждой из ваших иконок, используйте вместо этого векторную (контурную) иконку. Единственным исключением может быть FontAwesome/Black Tie. Я не уверен, что по умолчанию для них установлена ​​высота строки 1.