如何在WordPress帖子编辑器中使用图标字体(无代码)

您想在WordPress帖子编辑器中使用图标字体吗?图标字体允许您轻松地在文本中使用图像和符号。它们是轻量级的,不会减慢您的网站速度,并且可以轻松地缩放到任何大小,并像任何其他文本字体一样设置样式。在本文中,我们将向您展示如何在WordPress帖子编辑器中轻松使用图标字体,而无需编写任何HTML代码。

在WordPress编辑器中使用图标字体

我们将向您展示多种方法,每种方法使用的方法与另一种方法略有不同。您可以选择最适合您的一种。

 方法 1.使用 JVM 富文本图标在 WordPress 帖子编辑器中添加图标字体

建议在任何类型的WordPress网站上使用此方法。它易于使用,并与块编辑器无缝协作。

首先,您需要安装并激活 JVM 富文本图标插件。

激活后,您只需编辑WordPress帖子或页面或创建一个新帖子或页面即可。在帖子编辑器中,添加新的段落块,您将在块工具栏中看到一个新的标志图标。

块工具栏中的图标字体按钮

单击它将显示一个图标弹出窗口供您选择。默认情况下,它使用流行的字体真棒图标字体。

您可以使用搜索来查找图标,或者只需向下滚动以查找所需的图标,然后单击以添加它。

选择要插入的图标

使用图标字体的一个优点是可以使用 CSS 来设置它们的样式。

但是,由于您已经在使用块编辑器,因此您只需使用内置的颜色工具来设置图标样式。

该插件允许您在大多数文本块中使用图标字体,例如段落、列表、按钮、列、封面等。

下面是使用图标字体和块选项设置三列样式的示例。

列中的图标字体

使用图标字体的另一个有用示例是按钮。

这次我们使用内联图标字体以及两个按钮的一些文本。

在按钮和列表中使用图标字体

随意使用文本对齐、颜色、间距等块编辑器工具,以充分利用图标字体。

 方法 2.在WordPress帖子编辑器中添加图标字体

此方法要求您在帖子编辑器中添加短代码以显示图标字体。如果您不需要在WordPress帖子和页面中定期使用图标字体,则可以使用此方法。

首先,您需要安装并激活字体真棒插件。

激活后,您可以在WordPress中编辑帖子或页面,并使用以下短代码添加字体图标。


此处的 name 参数是 Font Awesome 使用的字体名称。您可以在字体真棒备忘单页面上找到整个列表。

添加后,您可以预览帖子或页面以查看图标在实时站点上的外观,因为它不会在块编辑器中显示为图标。

这就是它在我们的测试网站上的样子。

字体图标预览

您可以在段落内使用简码,并与其他文本内联。您也可以使用“简码”块自行添加它。

但是,使用“简码”块不会为您提供其他文本块的样式选项。

您还可以在列中添加简码以创建功能行。

这会有点棘手,因为您将无法看到实际图像,并且列高将在编辑器中不断变化。

这是它在我们的测试网站上的样子。这些列的高度相同,即使它们不在编辑器中也是如此。

您可能需要多次在新的浏览器选项卡中预览您的作品,以查看用户的外观。

 方法 3.将图标字体与WordPress页面构建器一起使用

如果您正在创建登录页面或使用 WordPress 页面构建器(如 SeedProd)设计您的网站,这种方法非常有用。

SeedProd是市场上最好的WordPress页面构建器。它使您可以轻松创建漂亮的登录页面或设计完整的网站。

首先,您需要安装并激活 SeedProd 插件。

激活后,系统会要求您输入插件许可证密钥。您可以在SeedProd网站上的帐户下找到此信息。

种子生产许可证密钥

输入许可证密钥并单击“验证密钥”后,您可以开始在登录页面上工作。

只需转到 SeedProd » 登录页面页面,然后单击“添加新登录页面”按钮。

添加新的着陆页

之后,系统会要求您为目标网页选择一个模板。

SeedProd 带有一堆漂亮的设计,您可以将其用作起点,或者您可以从空白模板开始并自己设计整个内容。

选择着陆页模板

在本教程中,我们将使用预先设计的模板。只需单击模板即可将其选中并继续。

接下来,系统会要求您为着陆页提供标题并选择网址。

输入后,单击“保存并开始编辑页面”按钮继续。

SeedProd 现在将启动页面构建器界面。它是一个拖放式设计工具,您只需指向并单击任何项目即可对其进行编辑。

您还可以从左栏中拖放块以向设计添加新元素。

在本教程中,我们将添加图标块。

添加图标块

添加块后,只需单击即可编辑其属性。

左列将更改以显示图标块的选项。您可以单击左侧的“图标”部分,然后选择其他图标图像或更改颜色和样式。

图标块设置

在 SeedProd 中使用图标的另一种方法是添加“图标框”块。

这与我们之前使用的“图标”块之间的区别在于,“图标框”允许您添加文本以及您选择的图标。

这是在显示产品功能、服务和其他项目时使用图标的最常见方法之一。

图标框块

您可以将图标框放在列内,选择颜色,并根据自己的喜好调整图标大小。

此外,您还可以使用 SeedProd 的格式工具栏设置随附文本的格式。

列内的图标框

完成页面编辑后,不要忘记单击屏幕右上角的“保存”按钮。

如果您准备好了,您可以单击“发布”以使页面上线,也可以单击“预览”以确保它看起来像您想要的那样。

您也可以单击“另存为模板”,以便您可以在网站的其他部分与 SeedProd 一起重复使用此设计。

以下是图标字体在我们的测试网站上的外观。

5efa732701047b080616670e3439dbb