如何在您的 WordPress 網站上使用 Font Awesome

已發表: 2019-02-14

當在使用矢量圖標或靜態圖像之間做出選擇時，使用矢量是個好主意。 它們體積小，加載速度快，並且可以縮放到任何大小而不會降低分辨率。 Font Awesome 是一個極好的矢量圖標庫，您可以在您的網站上使用它們，它們可能具有您需要的幾乎任何形狀或品牌。 最重要的是？ 免費。 最重要的是，這很容易。

訂閱我們的 YouTube 頻道

字體真棒WordPress圖標

在您的 WordPress 網站上使用 Font Awesome 庫相對輕鬆。 一旦您遵循這些簡單的步驟，您將能夠減少頁面加載時間並使用這些圖標作為您工作的一部分創建一些非常乾淨、清晰的設計。

要記住的一件事是（大多數情況下）Font Awesome 圖標將作為實際字體發送到您的網站。 因此名稱字體真棒。 您將能夠通過@font-face和 Font Awesome font-family使用 CSS 以您通常可以使用的字體字符的各種方式來設置樣式和操作它們。

因此，您不必擔心每個瀏覽器或視口的大小或間距。 如果它聽起來很棒，那是因為它確實如此。 這是你如何做到的：

安裝 Font Awesome

雖然有手動安裝和使用 Font Awesome 的方法，但對於 WordPress 用戶來說，還有更好的方法。 FA 的好人已經發布了一個官方的 Font Awesome WordPress 插件，它運行得很好。

字體真棒WordPress

安裝並激活插件後，您現在可以訪問 [[icon name]] 短代碼以及 HTML 片段。 只要您保留方便的 FA 圖標列表，您就可以確切地知道您需要什麼圖標。 您將在插件的設置頁面（在Settings – Font Awesome下找到）看到默認情況下是如何設置的。 一般來說，這些都可以保存和使用。 大多數人不需要其他任何東西。

字體真棒WordPress

Method選項對於大多數人來說可能是最重要的。 您可以在Webfont或SVG之間切換。 雖然 SVG 為您提供了更多的功能和功能（例如電源轉換和屏蔽），但 Font Awesome CDN 會將圖標作為 SVG 文件而不是字體提供。 雖然這在某些方面更好，但 SVG 並沒有被那麼多瀏覽器識別，WordPress 也不能總是很好地處理 SVG 圖像。 所以我們建議使用 webfont 版本安全。

Font Awesome 也是如此，就此而言：如果您不確定差異，或者不知道為什麼需要使用 SVG，那麼堅持使用默認的 webfont 方法可能是最簡單的。

要在您的 WordPress 網站上使用 Font Awesome 圖標，這很簡單。 只需將<i class="fab fa-wordpress"></i> 添加到您希望圖標出現的任何位置。 請務必檢查圖標庫以了解要輸入的名稱。

字體真棒WordPress

注意：插件中的短代碼是偶然的。 一些圖標呈現得非常好，而其他圖標則顯示為空白。 我們建議您堅持使用 HTML 插入，除非您看到短代碼適合您。 請參閱下面的示例，了解上面沒有渲染的 WordPress 示例，而相機圖標卻有。

字體真棒WordPress

你已經完成了。 Font Awesome WordPress 插件非常適合那些不習慣進入主題或文件以插入其他所需代碼的人。 但是，如果您願意這樣做，您可以按照這些說明在您的網站上獲取 Font Awesome 圖標。

手動安裝 Font Awesome 圖標

您需要做的第一件事是訪問 Font Awesome 網站。 從那裡，單擊開始使用免費按鈕。 他們確實為擁有高流量站點並需要企業解決方案的人提供付費計劃，但普通大眾可以使用免費版本。 您可以免費獲得 1,500 個圖標，以及 Pro 計劃中的 5,000 多個變體。

字體真棒WordPress

下一步是簡單地複制/粘貼。 但是您需要確保已突出顯示 webfont 選項，就像我們之前討論的那樣。

字體真棒WordPress

大多數主題都有一個位置供您自動將代碼插入網站的<head> 。 例如，在 Divi 的情況下，您將進入主題選項 - 集成並將此代碼粘貼到標記為將代碼添加到博客標題的字段中​​。 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

字體真棒WordPress

當您點擊保存時，您可以開始包含您想要的任何圖標，就像我們上面所做的那樣。 只是，您無法通過執行此操作訪問短代碼。

如果您的主題不支持代碼集成

如果您在主題中找不到這樣的位置，手動操作也同樣容易。 但是，您必須深入研究主題的核心文件才能這樣做，但這是一個非常快速的複制/粘貼，並且（通常）非常安全。 轉到 WP 儀表板中的外觀 – 編輯器，然後找到header.php文件。

字體真棒WordPress

找到</head>所在的那一行，在它之前，你需要粘貼來自 Font Awesome 的相同代碼。 按Update File ，您將能夠立即開始使用 FA 圖標。 同樣，通過這種方式安裝 Font Awesome，您不會獲得短代碼。

另外，請記住，無論何時編輯主題文件，您都希望使用子主題。 通過這樣做，您可以防止您所做的更改在主題更新時被覆蓋。

更多安裝選項

如果您對 Font Awesome 有其他更具體的需求，它們確實提供了多種訪問庫的方法。 從 NPM 和 Yarn 安裝，到 Sketch 和 React 集成，如果您需要的不僅僅是 WordPress，它們有很多選擇。

字體真棒WordPress

樣式字體真棒圖標

現在你已經安裝了它們，是時候讓圖標流行起來了。 您可以使用 CSS 來做到這一點，因為每個圖標都由一個 CSS 類管理。 兩種最常用的樣式是顏色和大小。 您可以在樣式表中包含 CSS 樣式，也可以內聯。 通常，您可能希望使用內聯樣式，因為像這樣的圖標在整個站點中並不通用。

Font Awesome 網站提供瞭如何執行此操作的示例。 他們使用冰屋圖標和附加類（如fa-xs或fa-xl或fa-2x特定尺寸）顯示尺寸。

字體真棒WordPress

此外，如果您需要圖標相對於特定大小並且絕對值不起作用，您可以將它放在自己的<div> 中以使其在您的約束範圍內工作。 

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

包起來

就是這樣！ 很棒，對吧？ 無論您是使用 Font Awesome WordPress 插件還是手動插入代碼，只需幾個步驟即可啟動並運行您的網站。 Font Awesome 很受歡迎是有原因的，其中一些來自它的易用性。 所以走出去，變得很棒！

您最喜歡使用 Font Awesome 圖標的方式是什麼？

文章特色圖片由 Font Awesome 提供