我怎样才能让一个字体很棒的图标带我到一个网页（例如我的 GitHub 个人资料）？

Question

我的网站底部有一个页脚，其中包含一些很棒的图标：

我已将图标设置为悬停状态，但如何让它们将我带到网站（例如 GitHub 用于 GitHub 图标）？

我目前拥有的演示：

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f1f1f1;
  color: black;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

i:hover {
  color: #AEC6CF;
  transition: 0.4s;
  cursor: pointer;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

<div class='footer'>
  <i class="fab fa-github" style='font-size:30px'></i>
  <i class="fab fa-stack-overflow" style='font-size:30px'></i>
  <i class="fab fa-github" style='font-size:30px'></i>
  <br></br>
  <p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>

编辑：

如果我按照建议使用 <a href="github.com"><i class="fab fa-github" style='font-size:30px'></i></a>，虽然它有效，但我现在有一个永久处于活动状态的图标：我怎样才能阻止这种情况发生？

编辑 2： 解决方案是只为 link 指定颜色。感谢 CBroe 的建议。

a:link, i {
  color: black;
}

Answer 1

您可以将很棒的字体图标放在带有 href 的锚标记中。

Answer 2

<a href="github.com"><i class="fab fa-github" style='font-size:30px'></i></a>

Answer 3

您可以将 HTML 锚标记用于 link 或 URL。把你的 HTML 改成这个，它应该可以解决你的问题。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

<div class='footer'>
  <a href="https://github.com/"><i class="fab fa-github" style='font-size:30px'></i></a>
  <a href="https://whosebug.com/"><i class="fab fa-stack-overflow" style='font-size:30px'></i></a>
  <br></br>
  <p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>

我怎样才能让一个字体很棒的图标带我到一个网页（例如我的 GitHub 个人资料）？

How can I make a fontawesome icon take me to a webpage (for example my GitHub profile)?

html

css

font-awesome