wordpress圖標(biāo)字體是每個(gè)WordPress網(wǎng)站的重要組成部分。它們極大地增加了維護(hù)響應(yīng)式網(wǎng)站設(shè)計(jì)的能力。

您注意到我們網(wǎng)站上的所有圖標(biāo)了嗎？其中之一是導(dǎo)航欄上的主頁圖標(biāo)。

好吧，如果您想將這樣的圖標(biāo)添加到您自己的網(wǎng)站 – 請高枕無憂，因?yàn)槲覀儗⒔棠绾巫龅竭@一點(diǎn)。

• 為什么是圖標(biāo)字體？
• 免費(fèi)圖標(biāo)字體
• 在WordPress上使用圖標(biāo)的最便捷方法
  • 使用插件
  • 使用Dashicons

為什么使用圖標(biāo)字體？

圖標(biāo)字體是包含符號和象形圖的字體，而不是字母和常規(guī)符號。它可以用來顯示常用的圖標(biāo)——小圖片。讓我們更深入地了解。

您可以在幾乎每個(gè)網(wǎng)站或博客中找到的一些圖標(biāo)字體示例是社交媒體按鈕。當(dāng)您要從網(wǎng)站分享內(nèi)容到您的Facebook帳戶時(shí)，您單擊Facebook圖標(biāo)字體！在圖標(biāo)字體存在之前，所有網(wǎng)絡(luò)圖標(biāo)和精靈都是圖像。由于圖像不可擴(kuò)展且無響應(yīng)，因此可能會減慢頁面加載時(shí)間并使某些受眾無法訪問。因此，圖標(biāo)字體作為替代品出現(xiàn)在任何屏幕上，而且重量更輕！

圖標(biāo)字體是矢量圖像。因此它們是無限可擴(kuò)展的。

它們是響應(yīng)式設(shè)計(jì)的一項(xiàng)重要功能，因?yàn)槟梢愿鶕?jù)需要輕松操作圖標(biāo)字體。有大量的自定義選項(xiàng)——更改圖標(biāo)大小和顏色、旋轉(zhuǎn)它們、添加效果等等。所有這些以及更多都可以通過CSS簡單地完成，而不會損失任何視覺質(zhì)量。

它們很簡單并且相對容易實(shí)現(xiàn)。此外，圖標(biāo)字體還允許您在單個(gè)文件中存儲許多符號。這可以減少HTTP請求的數(shù)量。

盡管還有其他添加圖標(biāo)的選項(xiàng)，但圖標(biāo)字體仍然被廣泛使用，因?yàn)槟梢暂p松找到免費(fèi)的圖標(biāo)字體，甚至設(shè)計(jì)自己的圖標(biāo)字體以在您的網(wǎng)站上使用。

免費(fèi)圖標(biāo)字體

您的WordPress網(wǎng)站有幾種免費(fèi)的圖標(biāo)字體來源。您只需在Google上瀏覽“icon font”即可。IcoFont、Font Awesome、We Love Icon Fonts和IcoMoon是最推薦的平臺。

IcoFont是免費(fèi)圖標(biāo)字體的最大來源之一。它以單一字體提供超過2100+個(gè)圖標(biāo)，分為30個(gè)類別。它還允許您生成自己的自定義圖標(biāo)包。

您可以簡單地從IcoFont的站點(diǎn)下載圖標(biāo)——通過復(fù)制HTML代碼或單擊站點(diǎn)導(dǎo)航中的下載按鈕。

只需瀏覽您選擇的圖標(biāo)，將它們添加到您的收藏中，然后下載它們。下載后，您將獲得一個(gè)包含CSS、示例和字體的zip文件。下載圖標(biāo)的HTML片段與示例文件夾中的Unicode配對。

如果您想直接在Web上使用它們，您可以將整個(gè)IcoFont目錄復(fù)制到您的項(xiàng)目文件夾中。請務(wù)必在header將位置引用到您的icofont.min.css。

另一個(gè)廣泛使用的圖標(biāo)字體來源是Font Awesome。它提供了 1500 多個(gè)免費(fèi)圖標(biāo)和 5000 多個(gè)專業(yè)版圖標(biāo)，涵蓋了 70 多種圖標(biāo)，具有四種主要風(fēng)格 – 實(shí)心、常規(guī)、輕巧、品牌。

We Love Icon Fonts是另一個(gè)來源，可讓您在其字體創(chuàng)建者的幫助下構(gòu)建自己的圖標(biāo)。您只需單擊“添加”并獲取可用于通過 CSS 自定義您的收藏的可嵌入代碼。

最后但并非最不重要的是，IcoMoon提供超過 5,500 個(gè)免費(fèi)矢量圖標(biāo)和超過 4,000 個(gè)高級圖標(biāo)。您還可以構(gòu)建自己的 IcoMoon 字體并使用導(dǎo)入功能上傳您自己的 SVG 文件。

除上述網(wǎng)站之外，你可以訪問https://www.iamxk.com/nav-icon以獲取更多的圖標(biāo)資源。

在WordPress上使用圖標(biāo)字體的便捷方法

您可以通過復(fù)制嵌入的代碼或使用替代選項(xiàng)手動(dòng)使用WordPress網(wǎng)站上的字體圖標(biāo)。不管性能問題如何，利用插件和內(nèi)置的Dashicons是使用WordPress字體圖標(biāo)的最快和最簡單的方法。

使用插件

使用WordPress插件是向WordPress網(wǎng)站添加圖標(biāo)字體的最簡單方法，無需修改代碼。首先，您必須安裝并激活免費(fèi)的Font Awesome集成插件。完成安裝和激活后，您可以開始添加帶有簡碼的字體圖標(biāo) –?[fawesome]。讓我們進(jìn)入細(xì)節(jié)。

短代碼中有四個(gè)屬性：

• target –‘a’標(biāo)簽的目標(biāo)
• href?– 在‘a’標(biāo)簽中使用的鏈接
• iclass?– 在/i/標(biāo)簽中使用的類
• aclass – 在’a’標(biāo)簽中使用的類

讓我們創(chuàng)建一個(gè)指向WordPress網(wǎng)站的圖標(biāo)。

在這里，我們必須將圖標(biāo)代碼 –?(fa-wordpres)?– 放入iclass標(biāo)簽，并將鏈接http://wordpress.com/放入ahref標(biāo)簽：

[ fawesome iclass=’fab fa-wordpress’ ahref=’https://wordpress.com’ ]

請注意，在此示例中，我們將前綴fab添加到iclass。稍后我們將通過為您提供備忘單來介紹樣式前綴。

以下是它在WordPress短代碼區(qū)塊上的外觀：預(yù)覽或發(fā)布后，它將如下所示：當(dāng)您單擊WordPress圖標(biāo)時(shí)，您將被重定向到鏈接的站點(diǎn)。

您也可以直接進(jìn)入Font Awesome圖標(biāo)的目錄并查看您要使用的圖標(biāo)的代碼。為此，請單擊該圖標(biāo)并將代碼復(fù)制粘貼到您網(wǎng)站內(nèi)容的預(yù)期部分。

讓我們使用Font Awesome上提供的免費(fèi)WordPress圖標(biāo)，并將其放在WordPress文章上作為示例。

首先，只需從Font Awesome復(fù)制所選的WordPress圖標(biāo)代碼：

然后，將它放在WordPress文章編輯器中HTML區(qū)塊上，它會如下所示：這是預(yù)覽時(shí)的樣子：

除了該示例之外，您仍然可以通過手動(dòng)定義元素（顏色、大小等）來根據(jù)項(xiàng)目需要對其進(jìn)行自定義。

下面是一個(gè)修改圖標(biāo)顏色和大小的代碼示例： 預(yù)覽：請記住，要引用圖標(biāo)，我們使用，并使用來啟動(dòng)命令。此外，每個(gè)圖標(biāo)名稱都有一個(gè)樣式前綴。