在早期，圖示很容易獲得，但要在 WordPress 中有效地實現它們卻有點困難。你可以用精靈來解決一些問題，但它們並不總是好的方法，隨著視網膜螢幕的出現，問題被放大了（真的）。
解決這一問題最常見的方法之一就是使用圖示字型。圖示是網路字型或向量，因此可以無限縮放，而且一個檔案中可以包含大量圖示，從而大大減少了請求數量。這樣，你幾乎可以使用任何你能想到的圖示。不過，隨之而來的也有一些效能方面的考慮。
我們將在本文中向您介紹使用 WordPress 圖示字型的幾種不同方法、從哪裡獲取它們以及哪種方法最適合您的網站。
去哪裡找圖示字型
現在有很多為 WordPress 網站查詢圖示字型的好地方。只需在谷歌中輸入 “圖示字型”，就能找到一些不錯的結果。其中最受歡迎、使用最廣泛的是 Font Awesome（或者阿里巴巴旗下的 icofont ）。截至撰寫本文時，Font Awesome 有 1,400 多個免費圖示，專業版中還有 4,500 多個圖示。從介面圖示到社交圖示、箭頭圖示以及許多其他型別的圖示，它幾乎無所不包。
Font Awesome 圖示庫
這裡還有一些其他的圖示可供參考：
- IcoMoon 是另一個受歡迎的服務，擁有 5500 多個免費向量圖示和 4000 多個高階圖示。事實上，我們將在下面進一步使用他們的圖示字型生成工具。
- Fontello 是另一項幫助你發現和構建圖示字型的出色服務。
- 如果你正在尋找一個超級輕量級的圖示集，一定要看看 Bytesize。所有 84 個圖示的最小值為 9KB（SVGZ 或 Gzipped 版為 2KB）。
- 如果你只想手動使用 SVG 圖示，你不會找到比 iconmonstr 更好的免費圖示庫，也不會找到比 Iconfinder 更好的高階圖示庫。
使用圖示字型的快捷方法
使用 WordPress 字型圖示的簡單快捷方法首先，我們將介紹一些使用WordPress字型圖示的簡單快捷方法。需要提醒的是，並非所有這些方法都是效能最佳的。為此，我們建議跳到最佳方法部分。
方法 1 – 使用 WordPress 外掛
使用 WordPress 字型圖示的最快方法就是使用第三方外掛。免費的 Font Awesome Integration 外掛包含最新的 Font Awesome 5 圖示庫。安裝並啟用後，只需簡單的簡碼程式碼即可插入圖示。他們現在甚至還有 WordPress 圖示！太酷了
你可以檢視 Font Awesome 5 的基本使用圖，瞭解更多使用和自定義方法，以及他們的圖示庫。例如，下面我們將 WordPress Font Awesome 圖示插入了一個 Gutenberg 短程式碼塊，並新增了 fa-3x 使其放大三倍。
[fawesome iclass="fab fa-wordpress fa-3x"]
古騰堡中的 Font Awesome 短程式碼
這是前端的樣子。很簡單吧？幾分鐘之內，我們就在網站上安裝並執行了 Font Awesome 圖示。
WordPress 5.0 中的 “Font Awesome” 示例
如果你想要大量易於使用的簡碼，不妨也試試 Shortcodes Ultimate 外掛。他們有一個高階圖示外掛可供你使用。
如果你想讓你的客戶在文章或頁面中新增圖示，上述方法是一個很好的解決方案，但如果你想在你的主題或外掛中使用這些元素，最好自己對它們進行enqueue（下面將進一步深入探討）。
方法 2 – 使用內建的儀表盤圖示
Dashicons 是一組預設的字型圖示，因為WordPress會在後臺使用它。您需要在前端啟用它，但您需要的只是指令碼名稱，WordPress 已經可以使用該檔案。
您可以將以下內容新增到您的 functions.php 檔案中，或者我們建議您使用 Code Snippets 這樣的免費外掛。這樣可以將破壞主題的風險降到最低，而且在主題更新時，更改也將持續進行。
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}
然後，您可以訪問 Dashicons 網站，選擇一個圖示並點選 “copy HTML” 連結，這樣就可以得到顯示圖示所需的程式碼。它們的選擇並不多，但仍然很好用，而且非常輕便。
<span class="dashicons dashicons-admin-post"></span>
例如，我們在下面的 Gutenberg HTML 區塊中插入了儀表盤圖示。
古騰堡 HTML 區塊中的 Dashicons
下面是它在前端的樣子。
WordPress 5.0 中的 Dashicons 示例
Dashicons 開箱即用，沒有任何很酷的快捷程式碼，但你可以用 CSS 自定義圖示的大小。下面是一個在頁首前插入圖示的示例。
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>
方法 3 – 手動連結到外部託管的圖示字型
第三個方案是手動連結外部託管的圖示字型。這基本上就是上述選項 1 中的外掛在幕後所做的工作。
對於 Font Awesome，你可以從他們的 “Start page” 頁面獲取程式碼，然後按照以下步驟操作。他們會在 CDN 上免費為你託管所有字型。看起來會是這樣：
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">
Step 1
將程式碼複製到 WordPress 網站上希望使用 Font Awesome 的每個模板或頁面的 <head> 中。您可以編輯主題的 header.php 檔案，或者按照我們的簡單教程學習如何在標題中新增程式碼。
Step 2
然後，您就可以開始在 HTML 的 <body> 中放置圖示了。找到合適的圖示並學習如何將其新增到頁面中。
使用圖示字型應考慮的效能問題
雖然使用上述方法之一在網站上新增圖示字型沒有任何問題，但從技術上講，它們並不是最好的方法。為什麼呢？歸根結底還是效能問題。
你可能並不需要所有這些圖示
首先，當你使用圖示字型外掛或連結到外部圖示字型庫時，它會載入整個庫中的所有圖示。如果你在整個網站中只使用 20 個左右的圖示，那麼可以用更好的方法來處理這個問題。
例如，我們在網站上使用了 Font Awesome 5 庫，雖然它的 CSS 檔案很小，但字型檔案本身卻有 108 KB。雖然這看起來並不算大，但如果我們只選擇實際使用的 HTML 字型，就會發現檔案實際上變得非常小。
Font Awesome 庫體積
從一個 CDN 載入通常更快
其次，從不同的 CDN 載入指令碼並沒有錯。但是，如果您可以選擇從一個 CDN 載入，通常會更快。為什麼呢？因為它可以利用單個 HTTP/2 連線，減少額外的 DNS 查詢。只要確保你的主 CDN 是一個好的 CDN 就可以了！
在本地託管圖示字型（按需託管）
由於上述效能原因，我們將向您介紹如何在本地託管圖示字型，以及只使用您需要的字型。所謂本地託管，是指從 WordPress 主機的伺服器或您自己的 CDN 上載入這些字型。
只選擇需要的圖示字型，可以將檔案大小從 100 KB 降到幾 KB，非常方便！更妙的是：你甚至可以混合搭配不同字型集的圖示。
基礎知識 – 如何使用
使用字型圖示需要在網站伺服器上託管字型檔案（WOFF、WOFF 2 等），然後使用 CSS 載入字面，再建立一些標記將圖示新增到正確的位置。
雖然您的網站將載入一個檔案，但由於某些瀏覽器使用不同的格式，您實際上最終會為每種字型設定多種檔案格式。Font Awesome 包含 6 種不同的檔案格式： EOT、SVG、TTF、WOFF、WOFF 2 和 OTF。不過，根據瀏覽器的支援情況，您實際上只需要 WOFF 或 WOFF 2。
提示：93%以上的現代瀏覽器都支援 WOFF。不過，WOFF 2 的壓縮率更高，但只有 83%+ 的現代瀏覽器支援。我們建議選擇其中一種或兩種。瀏覽器將根據您的程式碼決定向客戶端提供哪一種。
您的首要任務是使用工具只選擇您想要的圖示。然後將這些檔案新增到專案目錄的某個位置，通常是字型目錄。
接下來，將 Font Awesome CSS 檔案新增到專案中，然後使用普通的連結元素將其新增到網站上。
<link href="css/font-awesome.min.css">
你也可以對 CSS 檔案進行排序，如果檔案較小，也可以直接內聯使用。
如果你檢視一下 CSS 檔案，就能知道後臺正在發生什麼。字型檔案已載入，.fa 類的基本元素已定義（還有一些其他元素），最後，每個命名圖示已定義（例如：.fa-book）。
唯一需要注意的是字型檔案的路徑。預設情況下，字型檔案是從 .../fonts 目錄載入的，也就是當前CSS檔案上一個資料夾的字型目錄。你可能需要根據自己的目錄結構進行更改。
現在，你已經對它的工作原理有了更好的瞭解，接下來我們將一步步教你如何操作。在本例中，我們使用的是一個生產型電子商務網站。
Step 1
首先，你應該確定要使用哪個字型圖示庫。我們在本文開頭分享了一些我們喜歡的字型。在本例中，我們將使用 Font Awesome 和 IcoMoon 字型生成器。如果你想要 IcoMoon 提供的 WOFF 2 檔案，你必須一次性支付 9.00 美元才能訪問他們的高階庫。
你可以免費手動下載你想要的 Font Awesome 圖示，但你需要使用像 FontForge 這樣的工具來手動編輯它們的 WOFF 或 WOFF 2 檔案。我們就是要簡單，所以我們使用了生成器。
Step 2
前往 IcoMoon 生成器。在 Font Awesome 庫中點選 “Add”。
IcoMoon 字型庫
Step 3
接下來，您需要選擇要在 WordPress 網站上使用的圖示。如果您已經在使用 Font Awesome，並且只是要將其轉移到本地託管版本，那麼請檢視並列出一個簡短的列表，然後從庫中選擇它們。
選擇 Font Awesome 圖示
Step 4
選好所有圖示後，選擇底部的 “Generate Font”。對於這個網站，我們最終需要 20 個圖示。
從 IcoMoon 匯出 Font Awesome 圖示
你最終會得到如下檔案。其中最重要的是 style.css 檔案和字型檔案（WOFF、WOFF 2）。
圖示字型檔案
Step 5
接下來，建議你在上傳/複製到網站之前，在 style.css 中進行查詢和替換。下面是原版的樣子。
IcoMoon CSS 檔案
對於已經在使用 Font Awesome 的使用者來說，這樣做只是為了更方便地將類更改為 Font Awesome 類，這樣一來，如果 WordPress 網站上已經使用了該類編碼，就會自動開始使用這些圖示。
因此，查詢 “icon”，然後用 “fa” 替換所有出現的內容。你可以使用 Sublime 等文字編輯器進行快速查詢和替換。
在 Sublime 中查詢和替換
將 [class^="icon-"], [class*=" icon-"] 替換為 [class^="fa-"], [class*=" fa-"]。它還修正了每個圖示，使它們不再以 .icon- 開頭，而是以 .fa- 開頭。
您可能還需要根據步驟 7 中上傳字型檔案的位置更改源 URL。我們建議將 URL 更改為 CDN。
Step 6
接下來，你需要在網站上新增 CSS。有幾種方法可以做到這一點。
方法 1
由於 CSS 的數量很少，您可以複製檔案的所有 CSS 並貼上到 WordPress 定製器中。對於大檔案千萬不要這樣做，但這個檔案的 CSS 相對較少。這意味著它將在網站上內聯載入。
方法 2
您可以手動將樣式錶連結到 WordPress 網站的頁首。提示： 連結到您自己的 CDN，以提高效能。
<link href="https://cdn.yourdomain.com/fonts/style.css">
方法 3
您也可以在 WordPress 中呼叫 CSS 檔案。這個過程與手動方法非常相似。將以下內容新增到主題的 functions.php 檔案中，或使用免費的 Code Snippets 外掛。您可能需要根據上傳位置更改目錄。
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );
Step 7
現在您已經在網站上新增了 CSS，是時候上傳字型檔案了。你可以把字型放在任何地方，直接放在你的 /public 目錄中一個名為 “fonts” 的資料夾裡就可以了。但請記住， style.css 檔案中的原始檔夾必須匹配。
SFTP 管理圖示字型檔案
Step 8
現在，您的 WordPress 網站應該可以訪問 CSS 和字型檔案了。接下來，您可以在網站上新增一些標記。這只是一個新增齒輪圖示的例子。
<i class="fa fa-cog"></i>
你可以在示例網站上看到一個實時示例。請記住，您可以使用任何元素，而不僅僅是 i。除了在自定義類中新增 CSS 之外，您還可以使用常規的 span 元素。
網站上的 Font Awesome 示例
真正的區別在於字型大小的不同。請記住，當我們連結到 Font Awesome 外部庫時，字型檔案的總大小為 108 KB。在我們使用字型生成器並只選擇了網站所需的 Font Awesome 圖示後，字型檔案的大小減少到了 2.6 KB。我們的字型檔案大小減少了 97.59%！
WOFF 2 Font Awesome 檔案的大小
不僅如此，它現在還可以從我們的 CDN 載入，這意味著無需額外查詢 fontawesome.com 的 DNS。
您也可以對 SVG 圖示使用同樣的方法，只是略有不同。
圖示字型的可訪問性問題
圖示字型的一個缺點是可訪問性差。螢幕閱讀器可能會跳過它們，或者更糟糕的是，讀取 unicode 或字元本身。這將導致視障人士在檢視收藏夾選單項時聽到 “黃星收藏夾” – 這並不理想。您還應該考慮到如果字型無法載入會發生什麼情況。
理想的情況是，裝飾性圖示在無法載入時消失，而關鍵性圖示在出現問題時用文字代替。
可訪問性問題很容易解決，只需使用 aria-hidden="true" 引數和值向螢幕閱讀器表明，他們應該放棄我們的元素。
<span class="icon icon-star" aria-hidden="true"></span> My Favourites
在更完整的實現中，您還可以使用 Modernizr 測試對字型的支援。您需要對 CSS 稍作修改，更多詳細資訊請參閱 Bulletproof Font Icons 文章。
有關建立帶文字回退功能的關鍵圖示的資訊，我們還建議閱讀上面的文章，他們已經儘可能解釋並解決了這個問題，但實施起來有點超出本文的範圍。
小結
這就是圖示字型的全部內容。現在你知道了幾種在 WordPress 網站上輕鬆獲取圖示字型的不同方法，以及在效能方面實現它們的最佳方式。
我們始終建議使用字型生成器來建立圖示字型，該字型只包含您使用的圖示。這將使您的主題更加精簡！如果你有喜歡的庫或生成器我們沒有提到，請告訴我們。有很多不錯的庫或生成器！此外，請務必閱讀我們的 WordPress 字型深度指南。
評論留言