Placement of icons on the site page. Make it easier, support it easier

Everything should be stated as simple as possible, but not simpler.

A. Einstein

Good afternoon, dear developers. Quite often looking through digging in someone else's code, I come across such code writing for a button with an icon.

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 badge by Andry Zirka ( @ BlackStar1991 ) on CodePen .

This is the standard description of the button. I myself have been writing my code like this for a long time. This writing is especially practiced by those who use ready-made icon fonts like FontAwesome
Some difficulties arise if the text should be centered, and the icon is slightly offset from the text. But all this is perfectly solved through the property position: absolute; set by the icon. There are also problems with the positioning of this icon with the adaptability of the button, but this is another story.

Now I would like to describe my method of creating icons in the text of the page (using the example of the same FontAwesome).

HTML

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

CSS

 .button_menu{ min-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 40px; } .button_icon__menu:before{ content: "\f0c9"; font-family: FontAwesome; position: absolute; left: 0px; top: 14px; } 

Andry Zirka ( @ BlackStar1991 ) on CodePen .

---

The advantages of such a description.

1) Code has become less. (This will greatly facilitate your life on large-scale projects).

2) The code has become more semantically correct. If a div (or any other tag) functionally assigns a button to you, then do it through a button tag * Otherwise there may be problems, especially with Apple devices for which you have to type = “button” for your wrong tag.

3) the spans located inside the button are always centered. (* You can change its display: if you are interested in the internal indents).

4) As you can see, the whole essence of my design is that I render the icon image through the pseudo class: before (: after) and position it absolutely. At the same time, his parent’s span is position: relative; ( ! It is important that a separate class be assigned to the icon).

5) The icon will always be in its place with respect to the span, even if you have a language change, and for example, in another language this word could visually overlap the icon.

6) Icons designed in this way are easy to change, especially if you use preprocessors (SASS, SCSS, LESS ...), just add the desired class to the desired element.

Disadvantages of this description: (and where without them).

1) When using the button tag, you often have to drop or redefine styles, otherwise it doesn't look good.

 outline:none; background:none; border:none; 

2) For each parent (span), it is permissible to simultaneously display only two icons, actually on the pseudo-class: before and: after.

3) If you, like me, quite often use FontAwesome in your works, you will often have to visit their official website to learn the Unicode of each icon



This is somewhat more complicated than simply registering fa fa bars . There is a complete list of icons here.

4) Since I try to adhere to the methodology in writing my CSS, I can have quite a few classes for the parent element

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

But if you are not afraid of 4-5 classes for an element, then Welcome.