По шагам
1) Берём ссылку с cdnjs.com https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css
2) Открываем официальный сайт font-awesome: https://fontawesome.com/
3) Выбираем нужную иконку( я выбрал три разных )
content: "\f007";
content: "\f1ea";
content: "\f099";
КОД НА СКРИНЕ:
Не забываем об обратном слеше \
она над клавишей Shift
На всякий случай : ЧаВо
Собираем всё в один html документ так :
div {
width: 40px;
height: 40px;
position: relative;
margin: 0;
padding: 0;
line-height: 1;
display: inline-block;
}
.login:after {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: red;
}
.tps::before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f1ea";
color: blue;
}
.twitter::before {
font-family: "Font Awesome 5 Brands";
content: "\f099";
font-weight: 900;
color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="login"></div>
<div class="tps"></div>
<div class="twitter"></div>
Или на крайний случай выбрать иконки -эмодзи и из вывести в псевдоэлемент вот так
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
position: relative;
margin: 0;
padding: 0;
font-size: 20px;
}
li a {
text-decoration: none;
}
li::before {
display: inline-block;
width: 30px;
text-align: center;
filter: grayscale(100%);
}
li:first-child::before {
content: "🔧";
}
li:nth-child(2)::before {
content: "💡";
}
li:nth-of-type(3)::before {
content: "🎎";
}
li:nth-of-type(4)::before {
content: "🎵";
}
li:nth-of-type(5)::before {
content: "📷";
}
li:hover::before {
filter: grayscale(0);
}
<ul>
<li><a href="">настройки</a></li>
<li><a href="">важное</a></li>
<li><a href="">знакомства</a></li>
<li><a href="">музыка</a></li>
<li><a href="">фото</a></li>
</ul>
На toster.ru был вопрос подобный но я там реализовал по чуть чуть по другому