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

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

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

 方法 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 一起重复使用此设计。

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