如何在 WordPress 和 Divi 中使用 Lordicon

网页设计的趋势每年都在发生巨大变化。 然而，似乎已经占据并保持不变的是动画的使用。 人们使用移动设备和应用程序的次数越多，他们就越希望他们访问的网站使用一些相同的原则。 很好地使用动画可以促进用户交互，让您通过您希望他们拥有的体验来引导您的网站的访问者。 这就是 Lordicon 服务的用武之地。

什么是洛迪康？

Lordicon 是一组很酷的动画图标，可用于多种数字格式。 每个图标都有 JSON、GIF、EPS、SVG 和 PNG 格式。 此外，您可以复制和粘贴标准 HTML 代码。 使用 HTML 可以在大多数 CMS 和静态 HTML 环境中集成图标，而无需任何插件。

Lordicon 提供对他们库中超过 5,600 个动画图标的访问。 您可以免费使用超过 1000 个 Lordicon 图标。 但是，如果您想访问完整的库，则需要订阅。 Lordicon 入门很简单。 使用您的电子邮件地址注册，设置密码，然后您就可以浏览他们丰富的图书馆了。 如果您是开发人员，注册 GitHub 可能是最简单的方法。

注册后，您将有两个图标类别可供选择。

• 有线图标是更现代、更具表现力的图标，可完全自定义。 您可以选择颜色、设置动画速度、选择是否循环播放或选择动画样式。
• 系统图标更像是 Font Awesome 提供的图标，类似于 Divi 中嵌入的样式。

在我们向您展示如何使用 Lordicon 之前，让我们先了解一下定价选项，以便您决定是否要在您的网站上使用 Lordicon。

Lordicon 的价格是多少？

Lordicon 可免费使用！ 但是，正如我们之前提到的，您需要付费订阅才能使用所有图标变体。 Lordicon 提供两个价格点。 您可以选择按月付款，每月费用为 16 美元。 如果您选择购买年度计划，您的费用将减半至每月 8 美元或每年 96 美元。

还应该注意的是，通过付费订阅，您还可以更好地控制如何将图标集成到您的网站中。

浏览 Lordicon 界面

Lordicon 界面简单且经过深思熟虑。 第一步是浏览图标。 找到您想要使用的那个后，只需单击它以显示您的选项。 选择图标后，您可以使用边栏中列出的选项对其进行编辑。 在这里，您将设置颜色和笔触宽度。 从那里，您可以复制 HTML，将其下载为 GIF 或 Lottie (JSON)，或单击更多按钮以获取其他选项。

如果您想要图标的完全控制参数，只需单击右侧边栏中的箭头即可调出完整的编辑器。

在完整的编辑器中，您将获得更多选项供您使用。 除了选择颜色和笔触大小之外，您还可以选择图标的变体。 您通常可以选择三种不同的变体，以便无论如何都可以匹配您网站的审美。

其他选项包括触发器样式、大小和比例。 完成您喜欢的更改后，您可以下载或嵌入您的图标。

下载选项包括嵌入 HTML、Loridcon Lottie JSON、GIF、APNG、WebP 和 MP4 格式。 此外，您可以下载 EPS、Lottie JSON 或 After Effects 格式的源文件。

然后，您可以将这些文件导入 WordPress 的媒体库以供您根据需要使用。

如何在任何 WordPress 网站上使用 Lordicon

使用带有 Lordicon 插件的 Gutenberg 块将 Lordicons 嵌入 WordPress 网站非常容易。 Lordicon 的文档指出，他们的图标可以很容易地嵌入到使用 Gutenberg 块或使用 Divi 模块（或其他网站构建器）的任何 WordPress 网站上。 此外，他们还与 Slider Revolution 合作，将他们的图标集成到滑块中。

使用古腾堡块

在 Gutenberg 中使用 Lordicon 图标非常简单。 有两种方法可以做到。 第一种方法是在 Lordicon 中设置您的设计参数并复制 HTML 以在 Gutenberg 的自定义 HTML 块中使用。 第二个是在古腾堡使用带有自己自定义块的 Lordicon 动画图标插件。

首先，您需要从 WordPress 仪表板安装并激活 Lordicon 插件。 激活后，在您的 WordPress 网站上创建或编辑页面或帖子。 接下来，单击黑色 + 图标以选择Lordicon 元素块。

接下来，前往 Lordicon 图标库。 在本例中，我们将使用蜜蜂图标。 搜索蜜蜂，然后搜索箭头以打开完整的编辑器。

将您的图标嵌入古腾堡

嵌入您的图标可以通过以下两种方式之一完成。 第一种方法是从 Lordicon 下载 JSON 文件，然后将其上传到您的 WordPress 网站。 第二种方法是单击 HTML 按钮并复制嵌入代码中的 CDN 链接以简单地链接到它。

无论哪种方式都很好，但是在您的网站上使用 JSON 可能会减慢它的速度。 如果您只打算在这里和那里使用几个动画效果，那很好。 但是，如果您想使用多个 JSON 文件，最好使用 CDN 链接，以便 Lordicon 自己提供图像。

对于此示例，我们将使用 CDN 链接。 要将您的图标嵌入您的网站，请单击蜜蜂图标屏幕上的 HTML 按钮并复制 CDN 链接。

返回您的网站并将 CDN 链接粘贴到块设置的图标 URL字段中。 接下来，您将设置触发器，并选择延迟时间（如果需要）。 最后，设置图标大小、描边粗细和颜色。

就是这样。 如您所见，Lordicon 图标使用简单，并提供多种使用 Gutenberg 编辑器将它们集成到您的 WordPress 网站的方法。

如果您不想使用 Lordicon 插件并选择嵌入代码，您可以按照我们在下一节中概述的相同步骤，将 Divi 代码模块替换为 Gutenberg 中的自定义 HTML 块。

如何在 Divi 中使用 Lordicon

接下来，我们将向您展示如何将这些动画图标合并到 Divi 中。 对于本教程，我们将使用提供的移动应用登陆页面布局（免费！）您的优雅主题会员资格。 您可以从 Divi Builder 本身访问我们所有的预制布局包。

有几种方法可以在 Divi 中合并 Lordicon 图标。 使用 GIF，将 HTML 添加到 Divi 代码模块，或使用简码。 让我们探索每个选项，以便您选择最适合您的选项。

使用 GIF

对于本教程，让我们使用移动应用布局包中的登录页面。 首先，我们将获取英雄部分下的简介，并将图像替换为 Lordicon GIF。 颜色从英雄部分选择紫色，然后前往 Lordicon 选择时钟图标。 单击绿色默认颜色并将其替换为#6f4fff 。 单击应用以保存您的更改。

图标有三种样式。 为我们的图标选择线条样式（下面屏幕截图中显示的中间选项）。

在预览设置下，将触发器设置为“悬停时循环” ，并将大小设置为“大” 。

接下来，将可用的运动类型设置为Hover-1 。 这将使您的图标在悬停时动画并循环动画。

然后，将笔画宽度调整为35% 。 设置正确后，单击GIF按钮下载您的图标。

出现对话框时，背景选择透明，大小选择100px ，延迟保留默认250ms 。 单击“下载”按钮。

将您的图标添加到 Divi

回到 Divi builder 并选择 hero 部分下的第一个简介。 单击齿轮图标进行编辑，然后选择图像和图标部分下拉菜单。 单击已安装的日历图标将其替换。 选择您新下载的 GIF 以将其添加到媒体库。

接下来，单击“设计”选项卡并向下滚动到“图像/图标宽度” 。 将图标的宽度设置为100px 。 将对齐设置为左，然后单击绿色复选标记以保存模块。

虽然将 GIF 嵌入到您的 Divi 网站很简单，但让我们探索另一种方法，您可以将 Lordicon 动画图标合并到您的 Divi 网站中。

使用 Divi 代码模块

此方法将使您更好地控制图标的呈现方式。 嵌入 GIF 效果很好，但会限制一些动画效果。 例如，悬停等效果在使用 GIF 时不起作用。 为了真正控制您的 Lordicon 图标在 Divi 中的显示方式，我们建议使用Divi 代码模块。

使用代码模块很简单。 使用相同的布局包页面，导航到页面上的第二个 Blurb 模块。 这一次，我们将从 Blurb 模块中删除图像并保存。

保存后，单击黑色 + 图标并找到Divi Code Module 。 将其添加到 Blurb 上方的部分/行。

返回 Lordicon 并单击嵌入 HTML按钮。 这将打开嵌入 WEB对话框。 确保选中“悬停时循环” 。 然后确保您的尺寸设置为100px 。 最后，单击复制 HTML 代码按钮。

现在，返回您的 Divi 页面并将该 HTML 粘贴到代码模块中。 保存它，新的 Lordicon 嵌入应该出现在您从中删除图像的 Blurb 模块上方。

使用简码

使用简码的步骤与嵌入 HTML 非常相似。 在 Lordicon 中，搜索正在生长的植物图标。 在预览设置下，将触发器设置为Loop on hover并将大小设置为big 。 用#6f4fff替换它们的标准绿色。 将笔画宽度设置为35% 。 最后，通过单击JSON (LOTTIE)按钮下载 JSON 文件。

接下来，您可以将您从 Lordicon 下载的 JSON 上传到您的 WordPress 媒体库，或者链接到您在 HTML 代码中找到的 URL。

我们建议链接到您的短代码中的 URL，而不是将其上传到您的媒体库。 这将节省您网站上的空间，特别是如果您计划使用多个图标以及服务器进程。 Lordicon 短代码以[lord-icon]开头并以[/lord-icon]结尾。 如果使用CDN链接，您的简码将如下所示：

[lord-icon src="https://cdn.lordicon.com/bccqzuyr.json" 
trigger="hover" size="100" palette="#000000, #6f4fff"]
[/lord-icon]

对于图标源 (src=) ，您将复制 HTML 代码中正在生长的植物图标的链接。 确保您的动画设置为hover ，大小设置为100 ，并且您的颜色（调色板）为#000000和#6f4fff 。

最后一步是将您的简码放入 Divi 代码模块并保存。 您的简码应如下面的屏幕截图所示。

在整个站点中添加新图标可以通过复制上面的短代码来完成，然后更改 CDN 链接以及您的触发器样式、大小和颜色（如果您希望有不同的动画效果）。

请务必注意，这些项目是在您在 Lordicon 网站上创建图标时设置的。

哪种方法最好？

如果您查看您的页面，您会发现 GIF Lordicon 图标和您嵌入的 HTML 代码之间存在一些差异。 第一个区别是 GIF 连续动画。 我们创建的代码块只有在悬停时才会动画。 这取决于您选择哪种方法。

请记住，您的某些用户可能对移动很敏感。 虽然在网站上添加动作和动画是保持用户参与度的好方法，但您不想做得过火。 有时，您只需要微妙的交互就可以对您的设计产生兴趣。

Lordicon 图标为您的网站锦上添花

随着网页设计更倾向于移动应用体验，动画已成为网页设计不可或缺的一部分。 结合微妙的动画是升级网站外观和感觉的好方法。 拥有超过 1,000 个免费图标和数千个通过 Lordicon 订阅可用的图标，您绝对应该仔细看看他们的产品。 尤其是它很容易集成到 WordPress 和 Divi 中。

你用过洛迪康吗？ 如果是这样，请在下面告诉我们您的经历。

特色图片来自 i_photos / shutterstock.com