Como agregar un icono de Font Awesome en CSS

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Como agregar un icono de Font Awesome en CSS</title>
</head>
<body>

<h1 align="center" style="color:black; font-family: Monaco, 'Courier New', monospace; size:12px; text-transform:capitalize; text-decoration: none;">Como agregar un icono de Font Awesome en CSS</h1>

.linkedin::before {
    font-family: "Font Awesome 5 Brands"; font-weight: 900; content: "\f08c";
  }

.facebook::before {
    font-family: "Font Awesome 5 Brands"; font-weight: 400; content: "\f09a";
  }

.twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>

<ul style="margin: 0;">
  <li><span class="icon linkedin"></span> Linkedin</li>
  <li><span class="icon facebook"></span> Facebook</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>

</body>
</html>