如何在 WordPress 中使用字體真棒圖標

已發表: 2022-10-14

如果您想在 WordPress 網站中使用Font Awesome 圖標，您需要做的第一件事就是安裝並激活 Font Awesome Icons 插件。有關更多信息，請參閱我們關於如何安裝 WordPress 插件的文章。激活插件後，您需要編輯 WordPress 主題以包含 Font Awesome CSS 文件。最簡單的方法是將以下代碼添加到主題的 functions.php 文件中： add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); function enqueue_font_awesome() { wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3'); 這段代碼將從 Bootstrap CDN 加載 Font Awesome CSS 文件。如果您願意，您可以下載 Font Awesome CSS 文件並將其託管在您自己的服務器上。加載 Font Awesome CSS 文件後，您可以開始使用 WordPress 網站中的圖標。例如，您可以像這樣在菜單中添加圖標： Home Contact 您還可以在內容中使用 Font Awesome 圖標。例如，您可以將一個圖標添加到這樣的列表：這是第一項這是第二項這是第三項您可以將一個圖標添加到這樣的鏈接：在 Twitter 上關注我可能性是無限的！有關更多信息，請參閱 Font Awesome 網站。

因此，在您的 WordPress 網站上使用Font Awesome 庫相對簡單。遵循這些簡單的步驟後，您將能夠減少頁面加載時間。不必將圖標用作您網站的字體。它們可以以您通常能夠包含在字體中的任何方式進行編輯。 Font Awesome WordPress 插件適合那些不願意進入主題或文件以插入所需代碼的人。 Pro 計劃包括 1,500 個免費圖標，以及 5,000 多種變體。您可以通過將 class=fab fa-wordpress 鍵入和/或編輯為任何語言來添加所需的任何圖標。

在您的 WP 儀表板中，單擊外觀 - 編輯器，然後單擊 header.php 文件。在單擊之前檢查包含代碼的行的位置，然後從 Font Awesome 粘貼相同的代碼。這將需要深入研究主題的核心文件，但這將是一個簡單而快速的過程。安裝 Font Awesome 後，您需要確保圖標位置正確。可以在樣式表中包含樣式或內聯。顏色和尺寸是最常用的兩種款式。如果您需要它相對於特定大小但絕對值不是，您可以在其自己的 <div> 中修改圖標以使其在您的約束中工作。

當您在 Gutenberg 文本塊中（或在 WordPress Classic 編輯器中的格式欄上方）時，可以在擴展格式欄中找到Font Awesome Icon 菜單選項。圖標選擇器允許您按圖標名稱、類別或關鍵字搜索 Font Awesome 圖標。

如何在 WordPress 主題中使用 Font Awesome？

如果你想在你的 WordPress 主題中使用 Font Awesome，你可以通過幾種方法來實現它。一種方法是使用諸如Better Font Awesome之類的插件，它會為您提供一個設置頁面，您可以在其中輕鬆啟用或禁用您網站上的 Font Awesome 圖標。另一種方法是手動將 Font Awesome 代碼添加到您的主題中。您可以在 Font Awesome 網站上找到每個圖標的代碼。獲得代碼後，您可以將其添加到主題的 CSS 文件或您想要包含它的任何位置。

Font Awesome 團隊創建了一個新教程，介紹如何使用 ::before 偽元素在其應用程序的 4.7 版中使用 CSS 將圖標添加到您的頁面。使用本教程，您無需使用圖像或複制和粘貼代碼即可將圖標添加到頁面。
如果您安裝了 Font Awesome 的免費版本，您可能會錯過 Pro 版本中的一些圖標。如果這不是一個選項，您可以獲取替代的免費圖標或升級到 Pro 訂閱。
如果您想在不使用圖像或代碼的情況下向頁面添加圖標，則 ::before 偽元素方法是一個不錯的選擇。如果您按照 Font Awesome 提供的教程使用此偽元素很簡單，您還可以在頁面中添加圖標。

我可以在商業上使用 Font Awesome 嗎？

Font Awesome 是完全開源的，並帶有 GPL 許可證。該程序可用於任何項目，從商業到開源再到純個人。

如何在沒有插件的情況下向 WordPress 添加 Font Awesome？

如何在沒有插件的情況下將 Font Awesome 添加到您的 WordPress 您可以通過轉到Font Awesome 圖標庫並從一系列可用字體中進行選擇來手動添加圖標。您可以通過電子郵件將鏈接發送到您的主題來獲取嵌入代碼。

無需任何編程或設計知識即可將圖標添加到 WordPress。字體圖標是完全可定制的和響應式的，其中一些已經取代了傳統的圖像或 Sprite 表。它目前安裝在 80,000 多台計算機上，並與最新的 WordPress 版本兼容。圖標可以像常規的日常字體一樣頻繁地更改。您可以使用這些選項更改顏色、對齊方式、高度、樣式等。幾乎每個瀏覽器都支持字體圖標。因為有太多可用的字體圖標，所以我們網站上圖片的使用是有限的。

大多數設計師已經停止使用傳統圖像，並用 Font Awesome 圖標取而代之。圖標是一個很棒的工具，可以通過多種方式進行修改。當您更改圖標大小、旋轉它、更改其顏色或執行其他操作時，您還可以使其更加靈活。下面的代碼必須複製並粘貼到您的 WordPress 編輯器中。你如何讓 Font Awesome 在 Elementor 中工作？無需更改核心文件或為您的主題安裝任何插件。 Elementor 高級版中已經出現了 font awesome 的圖標。 Better Font Awesome 將允許您使用使用 Font Awesome Icons 和Font Awesome Shortcodes 插件創建的簡碼。

更改 Font Awesome 插件中的 CDN 設置是提供自定義圖標所需的全部內容。您也可以使用自己的 CDN 配置，而不是使用默認的 Font Awesome CDN。如果您只想使用基本的免費圖標，則不太可能需要對默認配置進行任何更改。從 font awesome 的官方網站下載免費的 zip 文件後，將其解壓縮並鏈接到您的頁面。在插件文檔中，有很多關於如何設置自己的 CDN 的信息。

Font Awesome：您網站的必備 WordPress 插件

Font Awesome WordPress 插件允許您在網站上使用圖標庫。如果您不熟悉它，可以通過轉到插件設置頁面來調整其設置。首先，您必須首先在您的 WordPress 網站上安裝 Font Awesome 插件。然後，在插件設置中，選擇使用套件。通過這樣做，您可以將插件的圖標與特定的 CDN 一起使用。如果您只需要基本圖標，則無需進行任何更改。

在沒有插件的情況下向 WordPress 添加 Font Awesome

在沒有插件的情況下向 WordPress 添加 Font Awesome 是一個相當簡單的過程。首先，您需要訪問 Font Awesome 網站並下載最新版本的 Font Awesome 庫。接下來，您需要將 Font Awesome 庫上傳到您的 WordPress 網站。最簡單的方法是使用 FTP 客戶端。將 Font Awesome 庫上傳到您的 WordPress 站點後，您需要在 WordPress 主題的 functions.php 文件中添加幾行代碼。您需要添加的代碼是：
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
函數 enqueue_font_awesome() {
wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3');
}
在沒有插件的情況下向 WordPress 添加 Font Awesome 是一個相當簡單的過程。您需要添加的代碼是：
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
函數 enqueue_font_awesome() {
wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3');
}

使用以下步驟，您將能夠將 Font Awesome 添加到您的 WordPress 網站。最常用的方法是內部或外部。最重要的是確保正確加載字體。如果字體和鏈接配置不正確，或者圖標根本沒有出現。使用 Font Awesome 很簡單，因為只需幾行即可複制和粘貼。如果您使用的是 Sass 或 Less，則需要下載 font-awesome 文件夾並將其放在項目根目錄中。一些插件可以幫助您完成安裝過程。您可能想創建自己的插件，可用於多個項目和主題。

如何在 WordPress 中使用字體真棒圖標

只需從 WordPress 菜單中選擇 Font Awesome 圖標。通過添加 *i class=fab fa-wordpress*/i 可以很簡單地向任何頁面添加圖標。檢查圖標庫以獲取有關包含內容的建議。請務必注意，插件中的短代碼並不總是有效。

以下是 (2121) 中如何在您的 WordPress 網站上使用 Font Awesome 圖標。它是網絡上最受歡迎的圖標庫之一。如何以多種方式在 WordPress 上配置 Font Awesome？您將在本文中學習如何將 Font Awesome 與 WordPress 無縫集成。當您不知道如何在您的網站上使用 Font Awesome 圖標時，將它們託管在您的服務器上是最好的選擇。如果您自己託管圖標，則唯一可以添加的文件是您將在 WordPress 網站上使用的文件。使 Font Awesome 作為圖標包脫穎而出的原因在於它能夠自定義和更改圖標的外觀。

WordPress 用戶可以使用以下方法訪問 Font Awesome。如果您沒有任何編碼經驗，自定義圖標會更加困難。作為免費下載安裝的塊插件 Gutenberg Stackable 可以與 Font Awesome 一起使用，使其更易於使用。 Stackable 功能允許您選擇與 Font Awesome 圖標質量一致的優質預製設計。您可以通過轉到圖標塊來訪問任何Font Awesome Pro帳戶的圖標。 Stackable 將為您處理註冊過程，因此無需註冊帳戶或創建套件代碼。無需具備編碼知識即可更改圖標的外觀。這僅適用於購買 Free 和 Pro 計劃的用戶。

如果你沒有使用 Font Awesome Pro，你應該在Font Awesome Standard 圖標列表中尋找免費圖標。如果您使用的是 Font Awesome Pro，則需要引用正確的樣式前綴以及支持文件。如果您使用樣式指南，您可以了解如何使用字體。這裡有一些很棒的 Pro 圖標。如果您訂閱了 Font Awesome Standard 或更高版本，則還必須使用 Pro 圖標。