fontawesomeのアイコンに紫の線？

Webアプリを作っていたらアイコンに謎の紫の線が

Webアプリケーションを作っていたら、Font Awesomeのアイコンに謎の紫の線が。
しかも長押しすると赤く変わる。最初は別のスタイルで上書きされているのかと思い、
importを使用しても全く消えない。

当時のコード

<header>
  <h1 class="header-title">Profile Setting</h1>
  <a id="home-icon" href="/home/profile">
    <i class="fa-solid fa-house"></i>
  </a>
</header>

header {
  background-color: #da8660;
  padding: 30px 0;
  position: relative;
}
#home-icon .fa-solid {
  font-size: 60px;
  line-height: 1;
}

---

原因

結論からいうと、リンク (<a>) のデフォルトスタイル が原因でした。

<a> はブラウザ標準で下線（text-decoration: underline）が付くのは知っていましたが、まさかアイコンにも適応されるとは。

よく調べると、Font Awesome のアイコンも文字扱いのようで、
下線がアイコンの下に描画されて「謎の紫線」に見えていたみたいです。

---

解決方法

少し力業ではありますが、
リンクのデフォルトスタイルをリセットすれば解決しました 👇

#home-icon,
#home-icon:link,
#home-icon:visited,
#home-icon:hover,
#home-icon:active,
#home-icon:focus {
  color: rgb(77, 58, 55);
  text-decoration: none; /*★*/
}

もし、もっと良い方法があれば教えて頂けると嬉しいです。

---

まとめ

• Font Awesome アイコンはあくまで「文字」扱い
• <a> のデフォルト下線が「謎の線」の正体
• text-decoration: none; で解決できる！