如何將字體真棒圖標添加到 WordPress – 完整指南

這就是本指南的全部內容。 讀完後，您將確切知道如何：

• 手動將 Font Awesome 樣式表添加到 WordPress
• 使用免費插件將 Font Awesome 添加到 WordPress
• 以各種不同的方式插入和設置 Font Awesome 圖標的樣式

讓我們深入研究……

為什麼你應該花時間向 WordPress 添加 Font Awesome 圖標

Font Awesome 圖標很棒，因為顧名思義，它們是圖標字體，而不是圖像。 這意味著你可以做一些很酷的事情，比如：

• 調整大小而不損失質量，因為圖標是矢量
• 更改顏色、添加動畫和使用其他 CSS 操作

總而言之，Font Awesome 圖標遠遠優於僅使用靜態圖像。

首先，我將向您展示將它們添加到您的站點的兩種不同方法。 然後，我將向您展示如何設計和操作您的圖標（無論您選擇哪種方法）。

如何手動將字體真棒圖標添加到 WordPress

如果深入研究主題代碼的想法讓您感到害怕，我建議您跳到下一部分，我將向您展示如何使用免費插件將 Font Awesome 圖標添加到 WordPress。

否則，我喜歡這種方法，因為它是一種很好的、輕量級的方式來啟動和運行 Font Awesome。

基本上，您需要做的就是將 Font Awesome 樣式表添加到您的 WordPress 主題中。 然後，您可以開始插入 Font Awesome 圖標並設置您喜歡的樣式。

以下是整個過程的工作方式，一步一步：

第 1 步：在您的 WordPress 主題中加入令人敬畏的字體樣式表

就像我說的，您的第一步是將 Font Awesome CSS 樣式表添加到您的 WordPress 主題中。 雖然您可以直接從 Font Awesome 網站獲得它，但我首選的方法是使用託管在 Bootstrap CDN 上的版本。

目前，該鏈接是：

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

但它會隨著 Font Awesome 發布新版本而改變。 因此，半定期更新到最新版本的鏈接是個好主意（儘管舊版本將繼續工作）。

要將此樣式表添加到 WordPress，您需要將其排入子主題的functions.php 文件中。 雖然添加 CSS 的基本方法是將鏈接放在標題中，但最好的做法是使用特殊的 WordPress 入隊功能，而不是將樣式表直接放在標題中。

此外，如果您需要升級主題，使用子主題可確保您的更改不會被覆蓋。

因為遵循 WordPress 代碼最佳實踐是一件好事，我絕對建議您同時使用子主題和入隊功能。

好的，這是如何做到的：

轉到外觀 → 編輯器並為您的子主題選擇functions.php文件。

然後，粘貼此代碼：

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

確保保存您的更改，您就完成了！ 不會太痛吧？

第 2 步：插入 Font Awesome 圖標

將樣式表排入隊列後，您可以通過轉到 Font Awesome 圖標搜索並找到要插入的圖標來將 Font Awesome 圖標插入您的站點：

當您單擊圖標時，Font Awesome 將為您提供使用該圖標所需的代碼：

您需要做的就是將該代碼放在 WordPress 編輯器的“文本”選項卡中，以向您的網站添加圖標。

就是這樣！ 您已成功為 WordPress 添加了 Font Awesome 支持。 現在，剩下的就是學習如何在您的 WordPress 網站上設置 Font Awesome 圖標的樣式。

但在我向你展示之前，我想回顧一下添加 Font Awesome 支持的插件方法。 如果您使用手動方法而不是插件方法，請隨意跳過。

如何使用插件將 Font Awesome 圖標添加到 WordPress

如果您更喜歡使用插件而不是手動將 Font Awesome 樣式表排入隊列，那麼 WordPress.org 上列出了一個可靠的免費選項，稱為 Better Font Awesome。

除了總是將最新的樣式表添加到您的網站之外，Better Font Awesome 還：

• 讓您使用簡碼嵌入 Font Awesome 圖標。
• 在 TinyMCE 編輯器中為您提供一個下拉菜單以插入圖標。

如果您打算經常使用 Font Awesome 圖標，這兩個工具可能會讓您的生活更輕鬆。 但是對於不經常使用的情況，我認為手動方法是最簡單的選擇，因為它是最輕量級的。

第 1 步：安裝並激活插件

要添加 Font Awesome，您需要做的就是安裝並激活插件。 真的沒有別的了。

雖然有一個基本設置面板，您可以通過轉到Settings → Better Font Awesome來訪問它，但您可以完全自由地將所有內容保留為默認值。

第 2 步：插入 Font Awesome 圖標

要使用插件插入 Font Awesome 圖標，您有兩個不同的選項：

• 使用 Font Awesome 網站上的代碼，就像我在上一節中演示的那樣。
• 使用可以從下拉列表中生成的簡碼。

因為我已經在上一節中向您展示了第一種方法，所以我將快速瀏覽一下下拉短代碼生成器。

當您創建新帖子或頁面時，您會注意到“添加媒體”按鈕旁邊有一個新的“插入圖標”按鈕。 如果單擊它，您將看到所有可用的 Font Awesome 圖標，以及過濾結果的選項：

您需要做的就是單擊您選擇的圖標，插件將插入正確的短代碼：

這就是它的全部！

現在您已經有了 Font Awesome 圖標支持，讓我們深入研究一些可以設置和操作 Font Awesome 圖標的方式。

如何設計字體真棒圖標和更改大小

無論您使用哪種方法將 Font Awesome 添加到 WordPress，您都將使用相同的基本原則來設置圖標樣式。

此外，無論您使用的是短代碼還是 Font Awesome 網站的嵌入代碼，這些命令都可以使用。

這些技巧中的大部分都直接來自 Font Awesome 示例頁面，因此您無需擔心兼容性問題。

更改字體真棒圖標的大小

讓我們從一個基本的開始——增加你的 Font Awesome 圖標的大小。 默認情況下，圖標很小，所以這絕對是您可能遇到的情況。

要增加圖標的大小，您可以使用以下任一修飾符：

• fa-lg – 尺寸增加 33%
• fa-2x – 加倍尺寸
• fa-3x – 三倍大小
• fa-4x——……
• fa-5x——……

要使用這些修飾符，您只需將其添加到代碼的圖標名稱之後（但在引號內），以及在短代碼的類引號內。 這是一個將兩個嵌入方法的圖標大小增加三倍的示例：

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [圖標名稱=“下載”類=“ fa-3x ”]

例如，這個：

在前端變成這樣：

旋轉字體真棒圖標

您還可以輕鬆旋轉 Font Awesome 圖標以更改其方向。

這是旋轉的修飾符。 您可以使用與上述大小修飾符完全相同的任何一個：

• fa-rotate-90 – 旋轉 90 度
• fa-rotate-180 – 旋轉 180 度
• fa-rotate-270 – 旋轉 270 度
• fa-flip-horizo​​ntal – 沿水平軸翻轉圖標
• fa-flip-vertical – 沿垂直軸翻轉圖標

為 Font Awesome 圖標添加動畫

您還可以為您的圖標添加一些基本動畫。 Font Awesome 為您提供了兩種不同的修改器來添加旋轉：

• fa-spin – 增加平滑的旋轉
• fa-pulse – 使圖標以 8 個不同的步驟旋轉

這些動畫最好搭配圓形圖標。 如果您使用其他形狀奇特的圖標，效果可能看起來有點怪異。

更改字體真棒圖標顏色

最後，我將向您展示如何更改 Font Awesome 圖標的顏色。 不幸的是，沒有內置的修飾符。 相反，您需要使用一些自定義 CSS。

不過別擔心——它非常簡單。

您只需要這個小代碼：

.fa-NAME {
color: COLOR;
}

其中 fa-NAME 是您的圖標的實際名稱，COLOR 是您想要將其更改為的顏色。

為了堅持我們之前示例中的下載圖標，將其變為紅色的方法如下：

您可以通過轉到Appearance → Customizer → Additional CSS 輕鬆添加自定義 CSS 。

收拾東西

Font Awesome 圖標可能需要你幾分鐘的時間來設置。 但是一旦你安裝了它們，它們就會永遠存在。 從那時起，您只需按照上述步驟插入和設置單個 Font Awesome 圖標的樣式即可。

請注意——如果您使用手動方法，您將需要定期進入並更新樣式表的鏈接以了解最新版本。