如何在WordPress主題中輕鬆添加圖標字體


您是否要在WordPress網站上添加圖標字體? 最近,我們的一位讀者問:在WordPress主題中添加圖標字體的最簡單方法是什麼?

圖標字體使您可以添加矢量(可調整大小)圖標,而不會降低網站速度。 它們像Web字體一樣加載,並且可以使用CSS設置樣式。

在本文中,我們將逐步向您展示如何輕鬆地在WordPress主題中添加圖標字體。

在任何WordPress主題中使用圖標字體

圖標字體是什麼,為什麼要使用它們?

圖標字體包含符號或像形圖,而不是字母和數字。 這些象形圖可以輕鬆添加到網站內容中,並可以使用CSS調整大小。 與基於圖像的圖標相比,字體圖標要快得多,這有助於提高WordPress網站的整體速度。

圖標字體預覽

圖標字體可用於顯示常用圖標。 例如,您可以將它們與購物車,下載按鈕,功能框,贈品競賽甚至在WordPress導航菜單中一起使用。

有幾種免費的開源圖標字體,其中包含數百種精美的圖標。

實際上,每個WordPress安裝都附帶了免費的dashicons圖標字體集。 這些圖標用於WordPress管理菜單以及WordPress管理區域內的其他區域。

其他一些流行的圖標字體有:

為了本教程的緣故,我們將使用Font Awesome。 它是最流行的免費開放源代碼圖標字體。 我們在WPBeginner網站上使用FontAwesome以及WordPress插件,例如OptinMonster,WPForms,RafflePress等。

在本指南中,我們將介紹在WordPress中添加圖標字體的三種方法。 您可以選擇最適合您的解決方案。

使用插件在WordPress中添加圖標字體

如果您是初學者級別的用戶,而只是嘗試向您的帖子或頁面添加一些圖標,那麼此方法適合您。 您無需修改主題文件,並且可以在網站上的所有位置使用圖標字體。

您需要做的第一件事是為WordPress安裝並激活Font Awesome插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,該插件將為您的主題啟用Font Awesome支持。 您現在可以編輯任何WordPress帖子或頁面,並使用圖標短代碼,如下所示:

[icon name=”rocket”]

您可以將此短代碼與其他文本一起使用,也可以在專用的短代碼塊中單獨使用。

在WordPress中添加圖標字體簡碼

添加後,您可以預覽您的帖子或頁面,以查看圖標在實時網站上的外觀。 這是我們測試站點上的外觀。

圖標預覽

您還可以單獨在段落塊中添加字體圖標簡碼,在其中您可以使用塊設置來增加圖標大小。

增加圖標大小

隨著文本大小的增加,在文本編輯器中看起來可能很奇怪。 這是因為簡碼不會在塊編輯器內自動更改為圖標字體。

您將需要單擊帖子或頁面上的預覽按鈕,以查看實際圖標大小。

圖標字體放大

您還可以在列內使用圖標簡碼並創建功能框,如下所示:

在功能框中使用圖標字體

2.在WordPress頁面生成器中使用圖標字體

最流行的WordPress頁面構建器插件內置了對圖標字體的支持。 這使您可以輕鬆地在登錄頁面以及網站的其他區域中使用圖標字體。

海狸生成器

Beaver Builder是市場上最好的WordPress頁面構建器插件。 它使您無需編寫任何代碼即可輕鬆地在WordPress中創建自定義頁面佈局。

Beaver Builder帶有漂亮的圖標,可以使用的模塊可以將它們拖放到帖子和頁面中。

Beaver Builder圖標模塊

您可以創建圖標組,添加單個圖標,然後將它們移動到位置適當的行和列中。 您也可以選擇自己的顏色,背景,間距和邊距,而無需編寫CSS。

在Beaver Builder中編輯圖標字體

您甚至可以使用Beaver Builder的Themer產品創建完全自定義的WordPress主題,而無需編寫任何代碼。

Elementor Pro

Elementor是另一個流行的WordPress頁面構建器插件。 它還帶有幾個允許您使用圖標字體的元素,包括Icon元素。

Elementor圖標

您只需將圖標拖放到任意位置,然後將其與行,列和表格一起使用即可創建漂亮的頁面。

其他流行的頁面構建器(例如Divi和Visual Composer)也完全支持圖標字體。

3.使用代碼手動在WordPress中添加圖標字體

正如我們前面提到的,圖標字體只是字體,可以像添加任何自定義字體一樣添加到您的站點。

某些圖標字體(如Font Awesome)可從網絡上的CDN服務器獲得,並可直接從WordPress主題進行鏈接。

您還可以將整個字體目錄上載到WordPress主題中的文件夾中,然後在樣式表中使用這些字體。

由於本教程使用的是Font Awesome,因此我們將向您展示如何使用這兩種方法添加它。

方法1:

這種手動方法非常簡單。

首先,您需要訪問Font Awesome網站並輸入您的電子郵件地址以獲取嵌入代碼。

獲取Font Awesome嵌入代碼

現在,檢查您的收件箱中是否有來自Font Awesome的電子郵件,其中包含您的嵌入代碼。 將此嵌入代碼複製並粘貼到WordPress主題的header.php文件中,就在 標籤。

您的嵌入代碼將是一行,可以直接從其CDN服務器獲取Font Awesome庫。 它看起來像這樣:


此方法最簡單,但是會導致與其他插件衝突。

更好的方法是使用內置入隊機制在WordPress中正確加載JavaScript。

可以從主題的標題模板鏈接到樣式表,而不必在主題的functions.php文件或特定於站點的插件中添加以下代碼。

function wpb_load_fa() {

wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

方法2:

第二種方法不是最簡單的方法,但是它可以讓您在自己的網站上託管Font Awesome圖標字體。

首先,您需要訪問Font Awesome網站以將字體包下載到您的計算機上。

將圖標字體下載到您的計算機

只需下載圖標字體並解壓縮軟件包即可。

現在,您將需要使用FTP客戶端連接到WordPress託管,然後轉到WordPress主題的目錄。

您需要在此處創建一個新文件夾並將其命名為字體。 接下來,您需要將圖標字體文件夾的內容上載到Web託管服務器上的fonts目錄。

將圖標字體上傳到您的WordPress主題

現在,您可以將圖標字體加載到WordPress主題中了。 只需將此代碼添加到主題的functions.php文件或特定於站點的插件中即可。

function wpb_load_fa() {

wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );

}

add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

您已成功將Font Awesome加載到WordPress主題中。

現在是您將在WordPress主題,帖子或頁面中添加實際圖標的部分。

在WordPress中手動顯示圖標字體

轉到Font Awesome的網站以查看可用圖標的完整列表。 單擊您要使用的任何圖標,您將能夠看到該圖標的名稱。

圖標名稱
複製圖標名稱,並在WordPress中像這樣使用它。

 

您可以像這樣在主題的樣式表中為該圖標設置樣式:

.fa-arrow-alt-circle-up { 
font-size:50px; 
color:#FF6600; 
}

您還可以將不同的圖標組合在一起並立即設置樣式。 例如,假設您要在鏈接旁邊顯示帶有圖標的列表。 您可以將它們包裝在

具有特定類別的元素。

Home Library Applications Settings

現在,您可以像這樣在主題的樣式表中對它們進行樣式設置:

.icons-group-item i { 
color: #333; 
font-size: 50px; 
} 
.icons-group-item i:hover { 
color: #FF6600
} 

我們希望本文能幫助您學習如何輕鬆地在WordPress主題中添加圖標字體。 您可能還需要看一下我們的教程,該教程介紹瞭如何在WordPress中使用導航菜單添加圖像圖標。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。