Почему люди делают иконки в кнопках/ссылках используя абсолютное позиционирование?
Никакой практической надобности вопрос не несет конечно) Просто работая с чужим кодом очень часто вижу вот такие вещи и не могу понять почему именно их и почему у всех)
Иконка - декоратор поэтому псевдоэлемент хорошо. Но почему абсолют с паддингом? Это был какой-то менстрим каменного века? При чем часто вертикальная позиция не процент/центрирование а фиксированное смещение
Дополнительно:
часто ссылок целая куча в навигации, и у всех у них бывают разные иконки, проще просто дополнительный класс задать этой кнопке, что бы отобразить ту иконку которую хочешь, профит в чём:
1 - если кнопке не задать дополнительный класс с иконкой, то её можно переиспользовать где угодно на сайте, если где-то повторяются шрифты например в других каких-то ссылках или кнопках
2 - нет лишних тегов в html для иконок
Но почему абсолют с паддингом?
попробуй спозиционировать без абсолюта)
а если часть иконки, то ну желательно да svg вставлять прямо в html
1. Ссылки/кнопки бывают многострочными. При инлайновом псевдо выглядеть это будет странно.
2. Флексы или гриды - хорошо, но имеют НО при наличии внутри текста какого-то тега (span, br). Чтобы гарантированно избежать этого, нужно оборачивать текст в span. <button><span>текст кнопки</span></button>
Итого получаем на чашах весов: абсолют против лишнего тега.
Те что я видел ни разу не были многострочными и более того явно подразумевались как однострочные, так что предельно странная штука
так что предельно странная штука
Мое дело рассказать почему так делают. Устраивать холивар не хочу.
Аргумент про подсчет паддингов практически отвалился с появлением кастомных свойств.
Это был какой-то менстрим каменного века?
В доисторическую догридовую эпоху, это был пожалуй самый надежный способ позиционирования иконки
без абсолюта у тебя положение текста будет зависеть от того, есть иконка или нет. А если она не загрузилась?
Если она не загрузилась, то осталось свободное место. Хоть абсолютом, хоть гридом. (И вообще пропал весь спрайт и сайту стало грустно)
Варианта со сдвигом три: вставлять иконку как img (промолчу), вставлять её как content в псевдоэлемент (а это совсем уж неудобно, потому что плохо регулируются размеры).
Ответы:
Паддинг для того, чтобы иконка была как бы частью элемента, а не находилась отдельно. И такая практика не устарела, до сих пор так делают, но редко. Только вот надобности особой в этом нет
- Она и будет частью элемента если убрать и паддинг и абсолют
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Иконки в кнопках или ссылках могут быть созданы с использованием абсолютного позиционирования по нескольким причинам:
1. **Гибкость дизайна**: Используя абсолютное позиционирование, вы можете свободно перемещать иконку внутри элемента (кнопки или ссылки) без влияния на остальной контент. Это позволяет создавать уникальные и креативные дизайны.
2. **Точное позиционирование**: Абсолютное позиционирование позволяет точно указать местоположение иконки относительно родительского элемента. Это особенно полезно, когда требуется точное выравнивание иконок в дизайне.
3. **Управление размером и отступами**: При использовании абсолютного позиционирования вы можете легко управлять размером и отступами иконки относительно родительского элемента. Это помогает создать более сбалансированный и привлекательный внешний вид.
Пример использования абсолютного позиционирования для иконки в HTML и CSS:
<button class="icon-button"> <span class="icon"></span> Click me </button>
.icon-button { position: relative; padding: 10px 20px; background-color: #007bff; color: #fff; border: none; } .icon { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 20px; height: 20px; background-image: url('icon.png'); background-size: cover; }
В данном примере иконка располагается слева от текста в кнопке с использованием абсолютного позиционирования. Это позволяет легко управлять ее расположением и внешним видом.