如何在WordPress帖子编辑器中使用图标字体

你想在WordPress帖子编辑器中使用图标字体吗？

图标字体允许您在文本中轻松使用图像和符号。他们是轻量级的，不会减慢你的网站的速度，他们可以很容易地缩放到任何大小和样式，就像任何其他文本字体。

在本文中，我们将向您展示如何在WordPress帖子编辑器中轻松使用图标字体，而无需编写任何HTML代码。

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

点击它将显示一个可供选择的弹出图标。默认情况下，它使用流行的字体令人敬畏的图标字体。

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

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

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

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

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

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

这一次，我们在两个按钮的文本旁边使用了内联图标字体。

可以随意使用块编辑器工具，如文本对齐、颜色、间距等，以最大限度地利用图标字体。

这里的name参数是Font Awesom使用的字体的名称。你可以在字体精美的小抄页面上找到完整的列表。

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

这是它在我们的测试场上的样子。

您可以在段落中使用快捷代码，并将其内联到其他文本中。你也可以使用‘短码’模块自己添加它。

然而，使用‘短码’块不会给你提供样式选项，你会得到其他文本块。

也可以在列中添加快捷代码以创建要素行。

这会有点麻烦，因为您将不能看到实际的图像，并且列的高度将在编辑器中不断变化。

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

您可能必须在新的浏览器选项卡中多次预览您的工作，才能看到它在用户看来是什么样子。

首先，您需要安装并激活SeedProd插件。有关更多详细信息，请参阅我们关于如何安装WordPress插件的分步指南。

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

在输入您的许可证密钥并点击“验证密钥”后，您就可以开始登录页面了。

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

之后，您将被要求为您的登录页选择模板。

SeedProd附带了一系列漂亮的设计，你可以将其作为起点，或者你可以从一个空白模板开始，然后自己设计整个东西。

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

接下来，系统将要求您提供登录页面的标题并选择URL。

输入密码后，点击“保存并开始编辑页面”按钮继续。

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

您还可以从左列拖放块以将新元素添加到设计中。

出于本教程的目的，我们将添加图标块。

添加块后，只需单击即可编辑其特性。

左栏将更改为显示图标块的选项。您可以点击左侧的“图标”部分，选择不同的图标图像或更改颜色和样式。

在SeedProd中使用图标的另一种方式是添加“Icon Box”块。

这与我们之前使用的‘Icon’块的不同之处在于，‘Icon Box’允许你添加文本和你选择的图标。

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

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

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

一旦你完成了页面编辑，别忘了点击屏幕右上角的“保存”按钮。

如果你准备好了，你可以点击‘发布’让页面上线，或者你也可以点击‘预览’来确保它看起来像你想要的。

你也可以点击“另存为模板”，这样你就可以在网站的其他部分使用SeedProd重复使用这个设计。

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

我们希望这篇文章能帮助你学习如何在WordPress帖子编辑器中使用图标字体，而无需编写HTML代码。你可能还想看看我们的WordPress性能指南，以优化你的网站速度或最好的WordPress登录页面插件。

更多wp网站技巧请关注我们。

标签：图标器中字体编辑代码帖子