您想在WordPress帖子編輯器中使用圖標(biāo)字體嗎?圖標(biāo)字體允許您輕松地在文本中使用圖像和符號(hào)。它們是輕量級(jí)的,不會(huì)減慢您的網(wǎng)站速度,并且可以輕松地縮放到任何大小,并像任何其他文本字體一樣設(shè)置樣式。在本文中,我們將向您展示如何在WordPress帖子編輯器中輕松使用圖標(biāo)字體,而無(wú)需編寫(xiě)任何HTML代碼。
![]()
我們將向您展示多種方法,每種方法使用的方法與另一種方法略有不同。您可以選擇最適合您的一種。
方法 1.使用 JVM 富文本圖標(biāo)在 WordPress 帖子編輯器中添加圖標(biāo)字體
建議在任何類(lèi)型的WordPress網(wǎng)站上使用此方法。它易于使用,并與塊編輯器無(wú)縫協(xié)作。
首先,您需要安裝并激活 JVM 富文本圖標(biāo)插件。
激活后,您只需編輯WordPress帖子或頁(yè)面或創(chuàng)建一個(gè)新帖子或頁(yè)面即可。在帖子編輯器中,添加新的段落塊,您將在塊工具欄中看到一個(gè)新的標(biāo)志圖標(biāo)。
![]()
單擊它將顯示一個(gè)圖標(biāo)彈出窗口供您選擇。默認(rèn)情況下,它使用流行的字體真棒圖標(biāo)字體。
您可以使用搜索來(lái)查找圖標(biāo),或者只需向下滾動(dòng)以查找所需的圖標(biāo),然后單擊以添加它。
![]()
使用圖標(biāo)字體的一個(gè)優(yōu)點(diǎn)是可以使用 CSS 來(lái)設(shè)置它們的樣式。
但是,由于您已經(jīng)在使用塊編輯器,因此您只需使用內(nèi)置的顏色工具來(lái)設(shè)置圖標(biāo)樣式。
該插件允許您在大多數(shù)文本塊中使用圖標(biāo)字體,例如段落、列表、按鈕、列、封面等。
下面是使用圖標(biāo)字體和塊選項(xiàng)設(shè)置三列樣式的示例。
![]()
使用圖標(biāo)字體的另一個(gè)有用示例是按鈕。
這次我們使用內(nèi)聯(lián)圖標(biāo)字體以及兩個(gè)按鈕的一些文本。
![]()
隨意使用文本對(duì)齊、顏色、間距等塊編輯器工具,以充分利用圖標(biāo)字體。
方法 2.在WordPress帖子編輯器中添加圖標(biāo)字體
此方法要求您在帖子編輯器中添加短代碼以顯示圖標(biāo)字體。如果您不需要在WordPress帖子和頁(yè)面中定期使用圖標(biāo)字體,則可以使用此方法。
首先,您需要安裝并激活字體真棒插件。
激活后,您可以在WordPress中編輯帖子或頁(yè)面,并使用以下短代碼添加字體圖標(biāo)。
此處的 name 參數(shù)是 Font Awesome 使用的字體名稱。您可以在字體真棒備忘單頁(yè)面上找到整個(gè)列表。
添加后,您可以預(yù)覽帖子或頁(yè)面以查看圖標(biāo)在實(shí)時(shí)站點(diǎn)上的外觀,因?yàn)樗粫?huì)在塊編輯器中顯示為圖標(biāo)。
這就是它在我們的測(cè)試網(wǎng)站上的樣子。

您可以在段落內(nèi)使用簡(jiǎn)碼,并與其他文本內(nèi)聯(lián)。您也可以使用“簡(jiǎn)碼”塊自行添加它。
但是,使用“簡(jiǎn)碼”塊不會(huì)為您提供其他文本塊的樣式選項(xiàng)。
您還可以在列中添加簡(jiǎn)碼以創(chuàng)建功能行。
這會(huì)有點(diǎn)棘手,因?yàn)槟鷮o(wú)法看到實(shí)際圖像,并且列高將在編輯器中不斷變化。
這是它在我們的測(cè)試網(wǎng)站上的樣子。這些列的高度相同,即使它們不在編輯器中也是如此。
您可能需要多次在新的瀏覽器選項(xiàng)卡中預(yù)覽您的作品,以查看用戶的外觀。
方法 3.將圖標(biāo)字體與WordPress頁(yè)面構(gòu)建器一起使用
如果您正在創(chuàng)建登錄頁(yè)面或使用 WordPress 頁(yè)面構(gòu)建器(如 SeedProd)設(shè)計(jì)您的網(wǎng)站,這種方法非常有用。
SeedProd是市場(chǎng)上最好的WordPress頁(yè)面構(gòu)建器。它使您可以輕松創(chuàng)建漂亮的登錄頁(yè)面或設(shè)計(jì)完整的網(wǎng)站。
首先,您需要安裝并激活 SeedProd 插件。
激活后,系統(tǒng)會(huì)要求您輸入插件許可證密鑰。您可以在SeedProd網(wǎng)站上的帳戶下找到此信息。

輸入許可證密鑰并單擊“驗(yàn)證密鑰”后,您可以開(kāi)始在登錄頁(yè)面上工作。
只需轉(zhuǎn)到 SeedProd ? 登錄頁(yè)面頁(yè)面,然后單擊“添加新登錄頁(yè)面”按鈕。

之后,系統(tǒng)會(huì)要求您為目標(biāo)網(wǎng)頁(yè)選擇一個(gè)模板。
SeedProd 帶有一堆漂亮的設(shè)計(jì),您可以將其用作起點(diǎn),或者您可以從空白模板開(kāi)始并自己設(shè)計(jì)整個(gè)內(nèi)容。

在本教程中,我們將使用預(yù)先設(shè)計(jì)的模板。只需單擊模板即可將其選中并繼續(xù)。
接下來(lái),系統(tǒng)會(huì)要求您為著陸頁(yè)提供標(biāo)題并選擇網(wǎng)址。
輸入后,單擊“保存并開(kāi)始編輯頁(yè)面”按鈕繼續(xù)。
SeedProd 現(xiàn)在將啟動(dòng)頁(yè)面構(gòu)建器界面。它是一個(gè)拖放式設(shè)計(jì)工具,您只需指向并單擊任何項(xiàng)目即可對(duì)其進(jìn)行編輯。
您還可以從左欄中拖放塊以向設(shè)計(jì)添加新元素。
在本教程中,我們將添加圖標(biāo)塊。
![]()
添加塊后,只需單擊即可編輯其屬性。
左列將更改以顯示圖標(biāo)塊的選項(xiàng)。您可以單擊左側(cè)的“圖標(biāo)”部分,然后選擇其他圖標(biāo)圖像或更改顏色和樣式。
![]()
在 SeedProd 中使用圖標(biāo)的另一種方法是添加“圖標(biāo)框”塊。
這與我們之前使用的“圖標(biāo)”塊之間的區(qū)別在于,“圖標(biāo)框”允許您添加文本以及您選擇的圖標(biāo)。
這是在顯示產(chǎn)品功能、服務(wù)和其他項(xiàng)目時(shí)使用圖標(biāo)的最常見(jiàn)方法之一。
![]()
您可以將圖標(biāo)框放在列內(nèi),選擇顏色,并根據(jù)自己的喜好調(diào)整圖標(biāo)大小。
此外,您還可以使用 SeedProd 的格式工具欄設(shè)置隨附文本的格式。
![]()
完成頁(yè)面編輯后,不要忘記單擊屏幕右上角的“保存”按鈕。
如果您準(zhǔn)備好了,您可以單擊“發(fā)布”以使頁(yè)面上線,也可以單擊“預(yù)覽”以確保它看起來(lái)像您想要的那樣。
您也可以單擊“另存為模板”,以便您可以在網(wǎng)站的其他部分與 SeedProd 一起重復(fù)使用此設(shè)計(jì)。
以下是圖標(biāo)字體在我們的測(cè)試網(wǎng)站上的外觀。






