如何讓 fontawesome 圖標將我帶到網頁（例如我的 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> ，雖然它有效，但我現在在永久 state 中有一個圖標活動：我怎樣才能阻止這種情況發生？

編輯 2：解決方案是只指定鏈接的顏色。 感謝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 錨標簽鏈接到 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://stackoverflow.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>