如何在WordPress帖子編輯器中使用圖標字體(無代碼)

您想在WordPress帖子編輯器中使用圖標字體嗎?圖標字體允許您輕鬆地在文本中使用圖像和符號。它們是輕量級的,不會減慢您的網站速度,並且可以輕鬆地縮放到任何大小,並像任何其他文本字體一樣設置樣式。在本文中,我們將向您展示如何在WordPress帖子編輯器中輕鬆使用圖標字體,而無需編寫任何HTML代碼。

在WordPress編輯器中使用圖標字體

我們將向您展示多種方法,每種方法使用的方法與另一種方法略有不同。您可以選擇最適合您的一種。

方法 1.使用 JVM 富文本圖標在 WordPress 帖子編輯器中添加圖標字體

建議在任何類型的WordPress網站上使用此方法。它易於使用,並與塊編輯器無縫協作。

首先,您需要安裝並激活 JVM 富文本圖標插件。

激活後,您只需編輯WordPress帖子或頁面或創建一個新帖子或頁面即可。在帖子編輯器中,添加新的段落塊,您將在塊工具欄中看到一個新的標誌圖標。

塊工具欄中的圖標字體按鈕

單擊它將顯示一個圖標彈出窗口供您選擇。默認情況下,它使用流行的字體真棒圖標字體。

您可以使用搜索來查找圖標,或者只需向下滾動以查找所需的圖標,然後單擊以添加它。

選擇要插入的圖標

使用圖標字體的一個優點是可以使用 CSS 來設置它們的樣式。

但是,由於您已經在使用塊編輯器,因此您只需使用內置的顏色工具來設置圖標樣式。

該插件允許您在大多數文本塊中使用圖標字體,例如段落、列表、按鈕、列、封面等。

下面是使用圖標字體和塊選項設置三列樣式的示例。

列中的圖標字體

使用圖標字體的另一個有用示例是按鈕。

這次我們使用內聯圖標字體以及兩個按鈕的一些文本。

在按鈕和列表中使用圖標字體

隨意使用文本對齊、顏色、間距等塊編輯器工具,以充分利用圖標字體。

方法 2.在WordPress帖子編輯器中添加圖標字體

此方法要求您在帖子編輯器中添加短代碼以顯示圖標字體。如果您不需要在WordPress帖子和頁面中定期使用圖標字體,則可以使用此方法。

首先,您需要安裝並激活字體真棒插件。

激活後,您可以在WordPress中編輯帖子或頁面,並使用以下短代碼添加字體圖標。

[icon name="home"]

此處的 name 參數是 Font Awesome 使用的字體名稱。您可以在字體真棒備忘單頁面上找到整個列表。

添加後,您可以預覽帖子或頁面以查看圖標在實時站點上的外觀,因爲它不會在塊編輯器中顯示爲圖標。

這就是它在我們的測試網站上的樣子。

字體圖標預覽

您可以在段落內使用簡碼,並與其他文本內聯。您也可以使用“簡碼”塊自行添加它。

但是,使用“簡碼”塊不會爲您提供其他文本塊的樣式選項。

您還可以在列中添加簡碼以創建功能行。

這會有點棘手,因爲您將無法看到實際圖像,並且列高將在編輯器中不斷變化。

這是它在我們的測試網站上的樣子。這些列的高度相同,即使它們不在編輯器中也是如此。

您可能需要多次在新的瀏覽器選項卡中預覽您的作品,以查看用戶的外觀。

方法 3.將圖標字體與WordPress頁面構建器一起使用

如果您正在創建登錄頁面或使用 WordPress 頁面構建器(如 SeedProd)設計您的網站,這種方法非常有用。

SeedProd是市場上最好的WordPress頁面構建器。它使您可以輕鬆創建漂亮的登錄頁面或設計完整的網站。

首先,您需要安裝並激活 SeedProd 插件。

激活後,系統會要求您輸入插件許可證密鑰。您可以在SeedProd網站上的帳戶下找到此信息。

種子生產許可證密鑰

輸入許可證密鑰並單擊“驗證密鑰”後,您可以開始在登錄頁面上工作。

只需轉到 SeedProd » 登錄頁面頁面,然後單擊“添加新登錄頁面”按鈕。

添加新的着陸頁

之後,系統會要求您爲目標網頁選擇一個模板。

SeedProd 帶有一堆漂亮的設計,您可以將其用作起點,或者您可以從空白模板開始並自己設計整個內容。

選擇着陸頁模板

在本教程中,我們將使用預先設計的模板。只需單擊模板即可將其選中並繼續。

接下來,系統會要求您爲着陸頁提供標題並選擇網址。

輸入後,單擊“保存並開始編輯頁面”按鈕繼續。

SeedProd 現在將啓動頁面構建器界面。它是一個拖放式設計工具,您只需指向並單擊任何項目即可對其進行編輯。

您還可以從左欄中拖放塊以向設計添加新元素。

在本教程中,我們將添加圖標塊。

添加圖標塊

添加塊後,只需單擊即可編輯其屬性。

左列將更改以顯示圖標塊的選項。您可以單擊左側的“圖標”部分,然後選擇其他圖標圖像或更改顏色和樣式。

圖標塊設置

在 SeedProd 中使用圖標的另一種方法是添加“圖標框”塊。

這與我們之前使用的“圖標”塊之間的區別在於,“圖標框”允許您添加文本以及您選擇的圖標。

這是在顯示產品功能、服務和其他項目時使用圖標的最常見方法之一。

圖標框塊

您可以將圖標框放在列內,選擇顏色,並根據自己的喜好調整圖標大小。

此外,您還可以使用 SeedProd 的格式工具欄設置隨附文本的格式。

列內的圖標框

完成頁面編輯後,不要忘記單擊屏幕右上角的“保存”按鈕。

如果您準備好了,您可以單擊“發佈”以使頁面上線,也可以單擊“預覽”以確保它看起來像您想要的那樣。

您也可以單擊“另存爲模板”,以便您可以在網站的其他部分與 SeedProd 一起重複使用此設計。

以下是圖標字體在我們的測試網站上的外觀。

5efa732701047b080616670e3439dbb

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章