Ícones na barra de navegação

Programação
#1

por algum motivo quando eu tento colocar ícones na barra de navegação os ícones não aparecem, mas o texto “HOME” aparece, alguém sabe o motivo?

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">

  <title>“GEEAD - Técnico em Desenvolvimento de Sistemas</title> 
</head>

<body>
  <body class="w3-black">
    <nav class="w3-sidebar">
      <style>
        .w3-sidebar {
          width: 120px;
          background: #222;
        }
      </style>
      
      <nav class="w3-sidebar w3-bar-block w3-center">
        <style>body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}</style>
        <a href="#home" class="w3-bar-item w3-button w3-padding-large w3-hover-black w3-hover-text-cyan w3-text-white">
          <i class="fa fa-home w3-xxlarge"></i>
          <p>HOME</p>
        </a>
      </nav>
    </nav>
#2

Deu erro 404 (not found) para a url desse estilo:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">

Usei assim e deu certo:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">