My font awesome is not showing despite having the correct link-CodePudding

I am following a tutorial and they're using this CDN link for font-awesome, but I can't get it to show the icon I've selected for the last part of the ul>li item, it just shows a box like the icon is supposed to be there but is missing.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Navigation</title>
  <link rel="stylesheet" href="css/css/navigation.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, dolores.</h1>

  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact US</a></li>
    <li><a href=""><i ></i></a></li>
  </ul>
</body>
</html>

CodePudding user response：

You're missing fa class before the icon class. Demo below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation</title>
    <link rel="stylesheet" href="css/css/navigation.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
   
   <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, dolores.</h1>
   
   <ul>
       <li><a href="">Home</a></li>
       <li><a href="">About Us</a></li>
       <li><a href="">Services</a></li>
       <li><a href="">Contact US</a></li>
       <li><a href=""><i ></i>
</a></li>
   </ul>
   
   
   
    
</body>
</html>