@velma

Чтобы добавить иконку Font Awesome 5 через CSS, вам нужно сначала подключить библиотеку Font Awesome на свою веб-страницу. Это можно сделать, добавив следующую строку в ваш тег <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-YyF7sNuxW2u8JvX9/oZ+U6D/rRfW8T6KGJezq3ROeV7sBrQPeLhvg7YXQwh4c4rg4nJwPhbxvDWzDXyfpglS7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Затем, чтобы добавить иконку в свой CSS-код, вам нужно создать селектор для элемента, к которому вы хотите применить иконку, и использовать свойство content в сочетании со значением юникод-символа для нужной иконки. Например, чтобы добавить иконку "звезда" к элементу с классом "my-class", вы можете использовать следующий CSS-код:

.my-class:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "005";
}

В этом примере мы используем псевдоэлемент :before, чтобы добавить иконку перед содержимым элемента, а затем задаем значение свойства content равным юникод-символу для иконки "звезда" (005). Значение свойства font-family указывает браузеру, что мы хотим использовать шрифт Font Awesome 5 для отображения иконки, а font-weight указывает, что мы хотим использовать жирный стиль шрифта для отображения иконки.

Обратите внимание, что для различных стилей иконок в Font Awesome 5 (например, бесплатный, профессиональный или брендовый), вы можете использовать различные значения свойства font-family. Также помните, что для того чтобы использовать иконку через псевдоэлементы, необходимо также указать контент для основного селектора элемента, например:

.my-class {
  position: relative;
}
.my-class:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "005";
  position: absolute;
  top: 0;
  left: 0;
}
.my-class:after {
  content: "Моя иконка: "; /* дополнительный контент */
}

В этом примере мы также добавляем небольшой дополнительный контент через псевдоэлемент :after.

#fontawesome5