[Font Awesome 6 Free] 顯示方框未顯示圖示

我們在寫網站的時候很常會載入一些可愛的小圖示讓網頁看起來更美觀，而我個人最常用的就是 Font Awesome，在使用過的過程中難免會遇到一點小問題，這個問題其實我在 Font Awesome 5 也有遇到，但那個時候沒想到要記錄下來。

如下圖，這是一個購物流程的步驟圖，CSS 寫完之後中間圖示沒有出現，只出現一個打 X 的方框。
CSS 如下，看得出來問題在哪裡嗎？我覺得我寫得挺中規中矩的。 
li:before {
    ...
    content: "\f07a";
    font-family: "Font Awesome 6 Free";
    ...
}

原來少了 font-weight: 900;，Font Awesome 的官方文件也有提供一個表格標明什麼版本的字型要用什麼 font weight，不過我實測起來 font-weight: 600、700、800、900、1000 其實都可以正常出現圖示。
所以最後的 CSS 應該長這樣： 
li:before {
    ...
    content: "\f07a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    ...
}
效果如下：
下次如果再發生這個問題記得要檢查 font-weight 是否正確喔！
參考文件

留言

張貼留言