WordPress圖示字型是每個WordPress網站的重要組成部分。它們極大地增加了維護響應式網站設計的能力。
您注意到我們網站上的所有圖示了嗎？其中之一是導航欄上的主頁圖示。
好吧，如果您想將這樣的圖示新增到您自己的網站 – 請高枕無憂，因為我們將教您如何做到這一點。
為什麼使用圖示字型？
圖示字型是包含符號和象形圖的字型，而不是字母和常規符號。它可以用來顯示常用的圖示——小圖片。讓我們更深入地瞭解。
您可以在幾乎每個網站或部落格中找到的一些圖示字型示例是社交媒體按鈕。當您要從網站分享內容到您的Facebook帳戶時，您單擊Facebook圖示字型！在圖示字型存在之前，所有網路圖示和精靈都是影象。由於影象不可擴充套件且無響應，因此可能會減慢頁面載入時間並使某些受眾無法訪問。因此，圖示字型作為替代品出現在任何螢幕上，而且重量更輕！
圖示字型是向量影象。因此它們是無限可擴充套件的。
它們是響應式設計的一項重要功能，因為您可以根據需要輕鬆操作圖示字型。有大量的自定義選項——更改圖示大小和顏色、旋轉它們、新增效果等等。所有這些以及更多都可以通過CSS簡單地完成，而不會損失任何視覺質量。
它們很簡單並且相對容易實現。此外，圖示字型還允許您在單個檔案中儲存許多符號。這可以減少HTTP請求的數量。
儘管還有其他新增圖示的選項，但圖示字型仍然被廣泛使用，因為您可以輕鬆找到免費的圖示字型，甚至設計自己的圖示字型以在您的網站上使用。
免費圖示字型
您的WordPress網站有幾種免費的圖示字型來源。您只需在Google上瀏覽“icon font”即可。IcoFont、Font Awesome、We Love Icon Fonts和IcoMoon是最推薦的平臺。
IcoFont是免費圖示字型的最大來源之一。它以單一字型提供超過2100+個圖示，分為30個類別。它還允許您生成自己的自定義圖示包。
您可以簡單地從IcoFont的站點下載圖示——通過複製HTML程式碼或單擊站點導航中的下載按鈕。
只需瀏覽您選擇的圖示，將它們新增到您的收藏中，然後下載它們。下載後，您將獲得一個包含CSS、示例和字型的zip檔案。下載圖示的HTML片段與示例資料夾中的Unicode配對。
如果您想直接在Web上使用它們，您可以將整個IcoFont目錄複製到您的專案資料夾中。請務必在header將位置引用到您的icofont.min.css。
另一個廣泛使用的圖示字型來源是Font Awesome。它提供了 1500 多個免費圖示和 5000 多個專業版圖示，涵蓋了 70 多種圖示，具有四種主要風格 – 實心、常規、輕巧、品牌。
We Love Icon Fonts是另一個來源，可讓您在其字型建立者的幫助下構建自己的圖示。您只需單擊“新增”並獲取可用於通過 CSS 自定義您的收藏的可嵌入程式碼。
最後但並非最不重要的是，IcoMoon提供超過 5,500 個免費向量圖示和超過 4,000 個高階圖示。您還可以構建自己的 IcoMoon 字型並使用匯入功能上傳您自己的 SVG 檔案。
除上述網站之外，你可以訪問https://www.iamxk.com/nav-icon以獲取更多的圖示資源。
在WordPress上使用圖示字型的便捷方法
您可以通過複製嵌入的程式碼或使用替代選項手動使用WordPress網站上的字型圖示。不管效能問題如何，利用外掛和內建的Dashicons是使用WordPress字型圖示的最快和最簡單的方法。
使用外掛
使用WordPress外掛是向WordPress網站新增圖示字型的最簡單方法，無需修改程式碼。首先，您必須安裝並啟用免費的Font Awesome整合外掛。完成安裝和啟用後，您可以開始新增帶有簡碼的字型圖示 – [fawesome]。讓我們進入細節。
短程式碼中有四個屬性：
- target –‘a’標籤的目標
- href – 在‘a’標籤中使用的連結
- iclass – 在/i/標籤中使用的類
- aclass – 在’a’標籤中使用的類
讓我們建立一個指向WordPress網站的圖示。
在這裡，我們必須將圖示程式碼 – (fa-wordpres) – 放入iclass標籤，並將連結http://wordpress.com/放入ahref標籤：
[ fawesome iclass=’fab fa-wordpress’ ahref=’https://wordpress.com’ ]
請注意，在此示例中，我們將字首fab新增到iclass。稍後我們將通過為您提供備忘單來介紹樣式字首。
以下是它在WordPress短程式碼區塊上的外觀：預覽或釋出後，它將如下所示：當您單擊WordPress圖示時，您將被重定向到連結的站點。
您也可以直接進入Font Awesome圖示的目錄並檢視您要使用的圖示的程式碼。為此，請單擊該圖示並將程式碼複製貼上到您網站內容的預期部分。
讓我們使用Font Awesome上提供的免費WordPress圖示，並將其放在WordPress文章上作為示例。
首先，只需從Font Awesome複製所選的WordPress圖示程式碼：
<i class=”fab fa-wordpress” ></i> 
然後，將它放在WordPress文章編輯器中HTML區塊上，它會如下所示：這是預覽時的樣子：
除了該示例之外，您仍然可以通過手動定義元素（顏色、大小等）來根據專案需要對其進行自定義。
下面是一個修改圖示顏色和大小的程式碼示例： 預覽：請記住，要引用圖示，我們使用<i>，並使用<span>來啟動命令。此外，每個圖示名稱都有一個樣式字首。
以下是命令的順序：
<i class=”style_prefix fa-icon name”></i>
或者，
<span=”style_prefix fa-icon_name”></span>
這是上述命令的備忘單：
| 風格 | 可用性 | 樣式字首 | 例子 |
| Solid | 免費 | fas |
<i></i> <span></span> |
| Regular | 付費 | far |
<i></i> <span></span> |
| Light | 免費 | fal |
<i></i> <span></span> |
| Brands | 付費 | fab |
<i></i> <span></span> |
使用Dashicons
不管網際網路上可用的開源圖示字型如何，WordPress實際上都有Dashicons——每個WordPress網站的內建預設圖示字型包。它是在WordPress 3.8中引入的。
Dashicons提供字型圖示，包括管理選單、歡迎螢幕、文章格式、媒體、影象編輯、TinyMCE、文章螢幕、排序、社交、產品、分類法、小部件、通知、WordPress.org特定等等。
這些圖示可用於自定義您自己的外掛、主題、文章型別圖示和您網站上的其他元素。由於它配備在您的WordPress上，因此非常易於使用！
您可以通過將程式碼新增到您的functions.php檔案來做到這一點，這在手動完成時非常耗時。相反，您可以簡單地使用像Code Snippets這樣的免費外掛來配置Dashicons，而無需配置functions.php檔案。
有了它，您可以訪問Dashicons網站並選擇您想要使用的那個。要將其整合到您的網站上，您可以單擊“複製HTML ”連結，然後您將獲得程式碼 – 只需將其複製並貼上到您的WordPress元素中即可。
例如，讓我們從Dashicons目錄中獲取dashicons-tickets圖示並將其新增到WordPress文章中。複製HTML並將其放入HTML區塊中。它將如下所示：單擊“預覽”後，您將看到該圖示：
要進一步自定義Dashicon，您可以使用CSS。
小結
如您所見，圖示字型可以很好地替代用作您網站的圖示、象形圖或符號的影象。圖示字型是響應式網站的重要元素，因為它們的尺寸較小，可以減少載入時間。
您還可以輕鬆地在網際網路上獲取圖示字型，因為其中很多都是免費的。
獲取圖示字型的一些推薦來源是：
您可以使用最快捷、最簡單的方法來新增它們，而不是手動新增圖示字型：
- 使用Font Awesome整合外掛
- 使用帶有程式碼片段外掛的內建WordPress Dashicons
您需要做的就是複製並貼上您要在網站目標區域使用的圖示的HTML程式碼。
評論留言