Comments 23
Никак не пойму, зачем 2 элемента. Почему бы не сделать так https://codepen.io/anon/pen/RZLjKZ?
Потому что кнопка может быть и без иконки
2 элемента, как по мне хороший вариант, только вторым элементом, нужно не оборачивать текст, а делать его для иконки.
Почему иконку делать отдельным элементом, чтобы можно было манипулировать ей с javascript и в html структура верстки чище.
Почему иконку делать отдельным элементом, чтобы можно было манипулировать ей с javascript и в html структура верстки чище.
<button class="button">
<i class="button__icon"></i>menu
</button>
Да, такой вариант тоже смотрится прилично, при условии что иконка присвоена именно к кнопке (по дизайну), а не к ссылке или параграфу
Без разницы. Я беру пример с вашей статьи, в ней логический элемент это button, то что внутри контент(текст) и иконка (декор).
Меньше html не значит лучше, структуру должна быть разбита на логические кусочки с которыми можно работать и легко читать и поддерживать.
Вот к примеру, из описанных вами недостатков.пример:
Как то совсем не по методологии, у вас тег span является элементом к .button_menu и .button, если же иконка является декорирующим элементом к тексту, то соответственно вместо классов (button_icon, button_icon__menu, button_icon__menu_active), добавляем к элементу button_menu__text модификатор к примеру button-menu__text--icon-menu
Проще же так:
Меньше 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>
Иконка с position: absolute, а текст position: relative? Браво.
Та можно «дезоксирибонуклеиновая кислота» вписать в кнопку и все поплывет.
Все же зависит от контекста, в котором эта кнопка будет использоваться.
Все же зависит от контекста, в котором эта кнопка будет использоваться.
Вторая половина 2017… они всё ещё используют иконочные шрифты.
Уже даже гитхаб от этой фигни отказался давно.
Хм… А почему, кстати? Я просто пристально за вебом не слежу.
Первое, что нашёл с кучей доводов: https://dev.atom-m.net/stat/seryozno_ne_ispolzuite_ikonochnye_shrifty.htm
Не хватает ещё довода «не семантично». Но семантичность никак не связана с табличной вёрсткой, как там упомянуто в конце. В 2 словах — шрифты — не инструмент для картинок, поэтому семантику картинок трудно подвешивать к ним.
Не хватает ещё довода «не семантично». Но семантичность никак не связана с табличной вёрсткой, как там упомянуто в конце. В 2 словах — шрифты — не инструмент для картинок, поэтому семантику картинок трудно подвешивать к ним.
UFO just landed and posted this here
Насчет того что надо использовать button — согласен. А насчет остального нет.
Посмотрите как сделаны кнопки «Fork», «Settings», «Change view» на том же CodePen, где вы писали примеры. Для меня этот вариант наиболее верный.
Посмотрите как сделаны кнопки «Fork», «Settings», «Change view» на том же CodePen, где вы писали примеры. Для меня этот вариант наиболее верный.
Что-то конструктивной критики иконочных шрифтов я не заметил.
Плюсы:
Минусы были предложены:
Реальные минусы:
Плюсы:
- из коробки
- простая вёрстка
Минусы были предложены:
- проблемы в читалках — уж очень частный случай
- семантика картинок — иконка есть иконка, что ещё к ней хотите прицепить?
- дислексия??
Реальные минусы:
- нет масштабируемости по умолчанию
По ссылке выше не ходил, но, считаю, парой самых веских минусов шрифтовых иконок — их монохромность и «увесистость» (как правило, подобные паки содержат большое кол-во символов, далеко не все используются на сайте).
Так необязательно всю кучу тащить — можно выбирать только то, что используется.
Гляньте, например, http://fontello.com/
Гляньте, например, http://fontello.com/
UFO just landed and posted this here
UFO just landed and posted this here
Sign up to leave a comment.
Размещение иконок на странице сайта. Делать проще, поддерживать легче