- PVSM.RU - https://www.pvsm.ru -
Все должно быть изложено так просто, как только возможно, но не проще.
А. Эйнштейн
Добрый день уважаемые разработчики. Довольно часто просматривая копаясь в чужом коде я наталкиваюсь на такое написание кода для кнопки с иконкой.
HTML
<div class="bl_button__wrapp">
<div class="bl_button">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="bl_button__text">menu</span>
</div>
</div>
CSS
.bl_button__wrapp{
width: 100%;
margin: 5% auto;
font-size: 30px;
line-height: 34px;
color: blue
}
.bl_button{
position: relative;
width: 150px;
padding: 10px;
margin: 0 auto;
text-align: center;
border: 1px solid #00f;
cursor:pointer;
}
.fa-bars{
position: absolute;
left: 10px;
font-size: 34px;
}
.bl_button__text{
display: inline-block;
}
See the Pen bad button [1] by Andry Zirka (@BlackStar1991 [2]) on CodePen [3].
Это стандартная форма описания кнопки. Я сам долгое время примерно так писал свой код. Данное написание особо практикуется теми, кто использует готовые иконочные шрифты на подобии FontAwesome [4]
Небольшие трудности возникают если текст должен быть по центру, а иконка несколько смещена относительно текста. Но всё это прекрасно решаемо через свойство position:absolute; задаваемое иконке. Также бывают проблемы с позиционированием данной иконки при адаптивности кнопки, но это другая история.
Теперь я хотел бы описать свой метод оформления иконок в тексте страници (на примере всё того же FontAwesome).
HTML
<button class="button_menu">
<span class="button_menu__text button_icon__menu">menu</span>
</button>
CSS
.button_menu{
width: 280px;
margin-top: 5%;
margin-left: 4%;
font-size: 4em;
color: blue;
border: 1px solid #00f;
outline:none; /* Убираем если вас это смущает по дизайну*/
background:none; /* Убираем если вас это смущает по дизайну*/
}
.button_menu__text{
position:relative;
width: 100%;
display: inline-block;
text-align: center;
margin: 0 auto;
padding: 10px;
}
.button_icon__menu:before{
content: "f0c9";
font-family: FontAwesome;
position: absolute;
left: 0px;
top: 14px;
}
See the Pen good button [5] by Andry Zirka (@BlackStar1991 [2]) on CodePen [3].
1) Кода стало меньше. (Это существенно облегчит вам жизнь на масштабных проектах).
2) Код стал семантически более верным. Если div(или любой другой тег) функционально у Вас выполняет назначение кнопки, то и делайте его через тег button *Иначе возможны проблемы, особенно с Apple устройствами для которых придется прописывать type=«button» для вашего не правильного тега.
3) span размещенный внутри button всегда выравнивается по центру. (*Можно сменить ему display: если вам важны внутренне отступы).
4) Как вы могли заметить, вся суть моего оформления в том что я выношу изображение иконки через псевдо класс :before (:after) и позиционирую его абсолютно. При этом у его родителя span установлен position:relative; (! Важно, чтобы для иконки присваивался отдельный класс).
5) Иконка будет всегда на своем месте относительно span, даже если у вас предусмотрена смена языка, и скажем, в другом языке данное слово могло бы визуально перекрыть иконку.
6) Иконки, оформленные таким образом легко менять, особенно если вы используете препроцессоры (SASS, SCSS, LESS...), просто добавь нужный класс к нужному элементу.
Недостатки такого описания: (а куда же без них).
1) При использовании тега button
довольно часто приходится сбрасывать или переопределять стили, иначе выглядит не очень.
outline:none;
background:none;
border:none;
2) Для каждого родительского (span) допустимо одновременно отображать только две иконки, собственно на псевдокласс :before и :after.
3) Если вы, как и я, довольно часто в своих работах используете FontAwesome, вам чаще придется посещать их официальный сайт, что бы выучить Unicode каждой иконки
Это несколько сложнее чем просто прописать классы fa fa-bars. Здесь есть и полный список иконок [6]
4) Поскольку я в написании своего CSS стараюсь придерживаться методологии, то у меня для родительского элемента может быть и довольно много классов
<button class="button_menu">
<span class="button_menu__text button_icon button_icon__menu button_icon__menu_active">menu</span>
</button>
Но если вас не пугает 4-5 классов для элемента, тогда Welcome.
Автор: BlackStar1991
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/262228
Ссылки в тексте:
[1] bad button: https://codepen.io/BlackStar1991/pen/brrzpW/
[2] @BlackStar1991: https://codepen.io/BlackStar1991
[3] CodePen: https://codepen.io
[4] FontAwesome: http://fontawesome.io/icons/
[5] good button: https://codepen.io/BlackStar1991/pen/xLLMaK/
[6] полный список иконок : http://fontawesome.io/cheatsheet/
[7] Источник: https://habrahabr.ru/post/335632/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox
Нажмите здесь для печати.