Советы по выравниванию иконок в тексте

От автора: иконки сейчас очень популярны, они дополняют контент (в большинстве случаев). Но с другой стороны они могут доставить немало хлопот. Если вы определились с форматом (SVG или шрифты-иконки?) и создали сами иконки, все равно по мере разработки будут всплывать различные моменты. Хороший вопрос, который часто приходит на ум, когда начинаешь рассуждать об иконках: есть советы, как можно выровнять svg иконки в тексте?

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

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

Совет 1: Определитесь с форматом иконок

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

Вне зависимости от ваших предпочтений выравнивание иконок сильно зависит от выбранного формата. К примеру, все ваши иконки занесены в один спрайт. Значит, у иконок фиксированный размер (если конечно вы не сделали сначала самые большие иконки, а потом с помощью background-size уменьшаете их). В таком случае намного проще подобрать размер и line-height текста для выравнивания с иконками.

Преимущество SVG в том, что он масштабируемый, и вы больше времени уделяете CSS, а не дизайну.

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

Совет 2: Используйте иконки одного размера

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

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

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

Тут можно подогнать условия, в которых создаются иконки, к используемому формату. Если вы используете SVG, то сама иконка может быть любого размера, но постарайтесь не трогать размеры холста в Illustrator’е (или любом другом графическом редакторе). Так вы сможете в будущем масштабировать иконки.

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

Совет 3: Подбирайте font-size под размер иконок

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

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

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

Совет 4: Точно настраивайте внешний вид с помощью CSS

После всего сказанного и сделанного есть один точный и простой способ по выравниванию иконок в тексте:

Ниже в демо заметна разница между идеально выравненными иконками и текстом и иконками, которые выравнены чуть хуже.

Совет 5: Используйте классы для отдельных иконок

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

Так намного лучше!

Заключение

Если и это не помогло точно выровнять иконки и текст, то вы не одиноки. Тут все сильно зависит от того, как вы создавали иконки. CSS – довольно простой способ.

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

Автор: Geoff Graham

Источник: //css-tricks.com/

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

Комментарии Вконтакте: