尽管有正确的 link,但我的字体真棒没有显示

My font awesome is not showing despite having the correct link

我正在学习一个教程,他们正在使用这个 CDN link 来获得超棒的字体,但我无法让它显示我为 ul> 的最后一部分选择的图标li 项目,它只是显示一个框,就像图标应该存在但丢失了。

<!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 class="fa-solid fa-user"></i></a></li>
  </ul>
</body>
</html>

您在图标 class 之前缺少 fa class。演示如下:

<!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 class="fa fa-user"></i>
</a></li>
   </ul>
   
   
   
    
</body>
</html>