• Skip to primary navigation
  • Skip to main content

桓桓鄉寇

如果一開始沒有高牆,就沒有所謂的侵略了嗎?

  • 首頁
  • WordPress 筆記
  • 主機
  • 前端
  • 意見回饋
You are here: 首頁 / 前端 / Font Awesome 5 Free 無法顯示圖示解決方法

Font Awesome 5 Free 無法顯示圖示解決方法

2020-02-14 by Eric Chuang Leave a Comment

內容目錄

  • 實驗流程
  • 解決方法
  • 原因
  • 後記

因為在社團上看到有人發問相關問題(原文連結),所以順手研究一下。

印象中之前公司網站在改版的時候,也遇到了類似的問題。當時由於我們只需要用一個圖示,因此評估之下,決定直接把圖示檔下載,自行上傳。但剛才又發現有人遇到一樣的問題,所以重新研究根本的病灶在哪裡。

實驗流程

直接在自己的電腦上開了一個 HTML 檔:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://kit.fontawesome.com/{{YOURKITNUMBER}}.js" crossorigin="anonymous"></script>
    <title>Document</title>
    <style>
        .icon::before {
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }
        .file::before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: "\f15b";
        }
    </style>
</head>
<body>
    <p class="abc icon">Hi</p>
    <span class="fas fa-file"></span>
</body>
</html>

預期的畫面應該是:

實際上是:

解決方法

在查閱了 Font Awesome 的文件之後,發現自己的操作內容跟文件教學完全一樣,都還是得不到預期效果。相比之下,使用 class=”fas fa-file” 這種引入方式就能正常顯示。

從開發人員工具檢查後,發現解決方法其實比我們想的簡單:「要不要改一下 font-family 就好了呢?」

自訂的虛擬元素

使用 <span class=”fas fa-file”></span> 的方式

把原本的 font-family 修改成 Font Awesome 5 Pro 之後,真的可以成功顯示了。

原因

Font Awesome 5 開始,使用者會載入官方提供的 Font Awesome Kit,這個 JavaScript 檔案,會讓你的頁面載入 free.min.css 這個樣式表檔案。(圖片中的 v4 是因為在 Font Awesome 的後台開啟支援舊版語法設定產生的)

接著進一步檢查 free.min.css 這個檔案,用 font-family 搜尋後,發現這個樣式表壓根沒有定義 Font Awesome 5 Free 這個 font-family⋯⋯雖然看了也蠻傻眼的,但是看起來這好像就是問題的根源。因此目前將 font-family 從 Font Awesome 5 Free 改為 Font Awesome 5 Pro 的做法,是沒有問題的。就看官方什麼時候把這個錯誤修正了吧。

後記

這次真的算運氣蠻好的,沒有花很多時間就發現這個問題。但是進一步想:為什麼這個顯而易見的錯誤沒有拿出來討論呢?我的猜想

  1. 官方其實發現這個錯誤了,但是因為使用者後來都把 font-family 改成 Font Awesome 5 Pro,因此將錯就錯,不改了。
  2. 目前大多數的開發者仍然使用 Font Awesome 4,所以在不使用 Font Awesome 5,而官方又有回溯支援的情況下,幾乎沒有人發現這個問題。
  3. 真的在用 Font Awesome 5 的人都使用 Pro,沒有人在跟你用 Free 的 XD?

所屬分類: 前端 標籤: Font Awesome

關於 Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

讀者互動

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料。

Copyright © 2021 · Genesis Sample on Genesis Framework · WordPress