How to use pseudo-elements correctly?

Question

css

Hello, friends. I just can't figure out how to use these pseudo-elements. The fact is that I installed Font Awesome on the site in order to add icons in front of the menu areas, but I don’t know how to do it(

Answer 1

You take a class or id and write in css class-name:before or after depending on where you want to put it before or after the element. Inside the block itself, you write the content attribute. Enter the value you want in parentheses.
For example \f130 is such an icon in Font Awesome

.class-name:before {
    content: "\f130";
}

Or just add the class name to the class="" attribute.
For example
<div class="fa-microphone"/>

Answer 2

.class::after {
content: "";
display: block;
width: XXpx;
height:YYpx;
background-image: url(адрес изображения);
}

if you need to put "before" - then before. or make another block with the required dimensions and add the FA icon class to it if they are connected to the page

Answer 3

Everything is very simple

<i class="fa fa-window-close" aria-hidden="true"></i>
<button type="button" fa fa-ban" aria-hidden="true">нажми</button>

and if you are not good with English, read

Answer 4

I would do this:
https://jsfiddle.net/jjq4f9jj/1/
Instructions for connecting and configuring here:
https://html5book.ru/shrift-awesome/