Размещение иконок на странице сайта. Делать проще, поддерживать легче

[Finesse]

Никак не пойму, зачем 2 элемента. Почему бы не сделать так https://codepen.io/anon/pen/RZLjKZ?

[walovari]

Потому что кнопка может быть и без иконки

[KYuri]

И что? Finesse очень хороший пример привел.
Расширяемый: https://codepen.io/anon/pen/wqrmKy

[Zvezdocheteg]

2 элемента, как по мне хороший вариант, только вторым элементом, нужно не оборачивать текст, а делать его для иконки.
Почему иконку делать отдельным элементом, чтобы можно было манипулировать ей с javascript и в html структура верстки чище.

<button class="button">
  <i class="button__icon"></i>menu
</button>

[BlackStar1991]

Да, такой вариант тоже смотрится прилично, при условии что иконка присвоена именно к кнопке (по дизайну), а не к ссылке или параграфу

[Zvezdocheteg]

Без разницы. Я беру пример с вашей статьи, в ней логический элемент это button, то что внутри контент(текст) и иконка (декор).
Меньше html не значит лучше, структуру должна быть разбита на логические кусочки с которыми можно работать и легко читать и поддерживать.

Вот к примеру, из описанных вами недостатков.пример:

<button class="button_menu">
  <span class="button_menu__text button_icon button_icon__menu button_icon__menu_active">menu</span>
</button>

Как то совсем не по методологии, у вас тег span является элементом к .button_menu и .button, если же иконка является декорирующим элементом к тексту, то соответственно вместо классов (button_icon, button_icon__menu, button_icon__menu_active), добавляем к элементу button_menu__text модификатор к примеру button-menu__text--icon-menu

Проще же так:

<button class="button-menu button-menu--active">
    <i class="button-menu__icon button-menu__icon--menu"></i>
    <span class="button-menu__text">menu</span>
</button>

[barkalov]

Иконка с position: absolute, а текст position: relative? Браво.

[u4ria]

А еще можно так.

[u4ria]

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

[BlackStar1991]

Замечание принимается, спасибо. Уже поправил

[webdevium]

Та можно «дезоксирибонуклеиновая кислота» вписать в кнопку и все поплывет.
Все же зависит от контекста, в котором эта кнопка будет использоваться.

[Firefoxic]

Вторая половина 2017… они всё ещё используют иконочные шрифты.
Уже даже гитхаб от этой фигни отказался давно.

[pda0]

Хм… А почему, кстати? Я просто пристально за вебом не слежу.

[spmbt]

Первое, что нашёл с кучей доводов: https://dev.atom-m.net/stat/seryozno_ne_ispolzuite_ikonochnye_shrifty.htm

Не хватает ещё довода «не семантично». Но семантичность никак не связана с табличной вёрсткой, как там упомянуто в конце. В 2 словах — шрифты — не инструмент для картинок, поэтому семантику картинок трудно подвешивать к ним.

[pda0]

Четыре звезды и лошадь — это огонь. :)

[XAHTEP26]

Насчет того что надо использовать button — согласен. А насчет остального нет.
Посмотрите как сделаны кнопки «Fork», «Settings», «Change view» на том же CodePen, где вы писали примеры. Для меня этот вариант наиболее верный.

[neurocore]

Что-то конструктивной критики иконочных шрифтов я не заметил.
Плюсы:

• из коробки
• простая вёрстка

Минусы были предложены:

• проблемы в читалках — уж очень частный случай
• семантика картинок — иконка есть иконка, что ещё к ней хотите прицепить?
• дислексия??

Реальные минусы:

• нет масштабируемости по умолчанию

[Jokerjar]

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

[KYuri]

Так необязательно всю кучу тащить — можно выбирать только то, что используется.
Гляньте, например, http://fontello.com/