问题[fontawesome]

为什么有些图标不起作用？(这是一个免费图标)

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  height: 100px;
  width: 100px;
  background-color: red;
}

.fa-location-dot {
  font-size: 40px;
  color: #222;
}

<div>
  <i class="fa-solid fa-location-dot"></i>
</div> 

我正在着陆。 https://merrymaker14.github.io/portfolio

但是 Font Awesome 中的图标不能用作链接。

<!-- Font Awesome -->
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
<div class="media">
<ul>
    <li>    
        <a target="_blank" class="btn btn-social-icon btn-vk" href="https://vk.com/merrymaker14">
            <span class="fa fa-vk"></span>
        </a>
    </li>
    ...
</ul>
</div>

为什么？该示例在链接中。