首頁 >web前端 >css教學 >為什麼我的 Font Awesome 5 圖示顯示為正方形,如何解決?

為什麼我的 Font Awesome 5 圖示顯示為正方形,如何解決?

Linda Hamilton
Linda Hamilton原創
2024-12-28 08:58:16626瀏覽

Why is My Font Awesome 5 Icon Displaying as a Square, and How Do I Fix It?

Font Awesome 5 的偽元素圖示顯示問題

嘗試直接透過Font Awesome 圖示變更跨度的內容時CSS,您可能會遇到圖示顯示為正方形的問題。此問題是由於使用 Font Awesome 5 的新“JS SVG”版本而出現的。

要解決這個問題,您必須將 font-weight: 900 加入 CSS 中。這會將您的 CSS 變更為以下內容:

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}

您可能還需要更新 Font Awesome CSS 檔案的 URL,以確保您使用的是最新版本。

注意:此解決方案僅適用於 Font Awesome 5 的“JS SVG”版本。如果您使用的是“CSS”版本,則不應遇到此問題問題。

以上是為什麼我的 Font Awesome 5 圖示顯示為正方形,如何解決?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn