CSS 內容在Font Awesome 5 中不顯示
將Font Awesome 5 整合到CSS 內容中時,使用者可能會遇到圖示無法顯示的情況顯示,僅顯示其對應的代碼。這種差異通常是由於字體系列和內容屬性的格式不正確而引起的。
解決方案
要解決此問題:
包含Font Awesome 5 CSS 文件:確保CSS 檔案Font Awesome 5 已正確包含在head標籤中,使用:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
,或者在CSS 文件中使用:
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")
正確字體- family 和Content:將font-family 和content屬性修改為如下:
.fp-prev:before { color: #000; content: '\f35a'; // Use '\' instead of '/' font-family: "Font Awesome 5 Free"; // Correct font-family name font-style: normal; font-weight: normal; font-size: 40px; // Optional font size }
使用HTML 元素: 新增適當的HTML 元素以顯示圖示:
<i>
以上是為什麼我的 Font Awesome 5 圖示沒有在 CSS 中顯示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!