如何使用 Divi 创建图标字体按钮

图标字体按钮在网页设计领域有很多用途。 由于字体图标在缩放到不同大小时保持清晰的颜色和设计，因此在按钮中使用它们是有意义的。 而且，使用 Elegant Icon Font 在 Divi 中创建图标字体按钮实际上非常容易。 在本教程中，我将向您展示如何使用带有 Divi 按钮模块的图标字体来创建单个图标按钮。

本教程的一些亮点包括：

• 如何使用优雅字体将图标添加为按钮文本
• 如何添加填充和边框半径以确保按钮呈现完美的正方形或圆形
• 如何在悬停时用不同的图标替换按钮图标
• 如何定位按钮图标以重叠图像
• 和更多…

抢先看

这是即将发生的事情的先睹为快……

你需要什么

对于本教程，我将使用以下内容：

• Divi 主题（显然）
• The Elegant Font Icons – 一旦您从博客文章中下载了 zip 文件，我们将拖入 eleganticons.ttf 字体文件以用作我们按钮模块的自定义字体。
• Bed & Breakfast 主页布局（可从 Divi Builder 免费获得）

让我们开始吧！

将优雅的图标字体添加到您的按钮模块

添加按钮模块

首先，创建一个新页面并部署可视化构建器。 选择“从头开始构建”，然后在部署可视化构建器后，向该部分添加一列行，然后向该行添加一个按钮模块。

拖入优雅的图标字体

要获得 Elegant Icon Font，请访问 Elegant Icon Font 博客文章并下载字体文件。 解压缩 zip 文件内容并通过导航到优雅的字体 > HTML CSS > 字体找到优雅的图标字体文件。 然后将文件“ElegantIcons.ttf”从您的计算机文件中拖放到可视化构建器中。

这将自动打开上传字体模式。 只需单击上传按钮即可将字体上传到 Divi Builder。

现在，在可视化构建器中自定义任何模块字体时，您将可以使用优雅的图标字体。

转到按钮模块设置并使用您刚刚上传的新优雅图标字体更新按钮字体。 它将显示在“自定义字体”下的图标列表中。

您可能会注意到，现在您的按钮文本已转换为一堆图标。 这是因为输入到按钮文本输入框中的每个字符现在都有一个对应于当前使用的字母/字符的图标。

由于我们只需要一个图标用于我们的按钮，您可以选择键盘上的任何字符来生成与该字符相关联的图标。 例如，为按钮文本输入数字 5 以获得右 V 形箭头。

悬停时交换按钮图标

如您所知，按钮模块包括在悬停时添加图标的选项。 我们可以使用此功能将图标字体替换为悬停图标，以获得不错的悬停效果。 我们需要做的就是修改按钮设置如下：

按钮文字大小：30px
按钮图标：见截图（这将是将替换用于按钮的图标字体的图标）
按钮图标颜色：#0c71c3（这应该与用于按钮文本的颜色相匹配）
按钮图标位置：左
按钮悬停文本颜色：rgba(255,255,255,0)（这是完全透明的，以便在悬停时隐藏按钮图标字体）
自定义填充：左 1em，右 1em（此填充将覆盖按钮的默认填充并防止其在悬停时扩展）

现在我们需要做的就是覆盖自定义 css 中 before 元素的边距。 转到“高级”选项卡并在“之前”框中输入以下 CSS：

margin-left: 0 !important;

现在您的按钮图标将被悬停时的悬停图标替换。

创建可随按钮文本大小缩放的完美圆形图标按钮

圆形按钮设计对于单个图标按钮非常有效。 而且，如果您了解按钮模块间距的内部工作原理，您就可以创建完美的圆形按钮，根据按钮文本大小进行缩放。

诀窍是使用“em”长度单位来分隔按钮。 此长度单位与您的按钮文本大小有关。 因此，如果您的按钮文本大小为 30 像素，则 1em 也是 30 像素（2em 将是 60 像素，依此类推……）。 知道了这一点，我们只需要确保按钮周围的填充在所有 4 个边上都相同。 但是你可能没有想到的是，按钮文本的 line-height 默认是 1.7em。 这意味着我们需要在添加顶部和底部填充值时考虑到这一点。

对于那些想知道创建圆形按钮所需的填充值背后的数学原理的人，这里是：

对于 Left 和 Right 填充，将它们都设置为 1em。 这意味着我们的按钮总宽度将为 90px（或 3em），因为……

左内边距 30 像素 + 图标字体 30 像素 + 右内边距 30 像素 = 总共 90 像素

按钮文本行高为 1.7em，相当于按钮文本大小 (30px) 的 170%，即 51px。

对于顶部和底部填充，将它们都设置为 0.65em。 0.65em 相当于按钮文本大小 (30px) 的 65%，也就是 19.5px。

所以…

顶部填充 19.5 像素 + 行高 51 像素 + 底部填充 19.5 像素 = 总共 90 像素

这意味着当按钮文本设置为 30 像素时，按钮的总大小将为 90 像素 x 90 像素（一个完美的正方形）。 事实上，你可以这样想。 无论您将按钮文本大小设置为什么，按钮的总大小将是该值的 3 倍。 因此，一个 40 像素的按钮文本将创建一个 120 像素 x 120 像素的按钮，依此类推。

现在，按钮具有正确的尺寸，但它仍然是方形的。 我们需要做的就是添加 50% 的边框半径以将方形按钮更改为完美的圆形按钮。

以下是将按钮更改为圆形按钮所需的内容：

按钮边框半径：50%
自定义填充：顶部 0.65em，底部 0.65em，右侧 1em，左侧 1em

不要忘记，您可以调整按钮文本大小，当填充缩放到文本大小时，按钮将保持完美的圆形。

将图标按钮添加到您的 Divi 布局

Divi 可以轻松添加和自定义单个图标按钮以适应任何预制布局的设计。

对于此示例，我将向您展示如何将单个图标按钮添加到 Bed & Breakfast Home Page 布局。

要将布局添加到您的页面，请单击页面底部的紫色图标打开设置菜单（确保启用了可视化构建器）。 然后单击从库中加载图标。 选择 Bed & Breakfast Home Page 布局，然后单击“使用此布局”按钮将布局部署到页面。

向图像添加图标按钮

假设您想添加一个小图标按钮来覆盖图像的一角，以获得链接到特定产品或服务的附加 CTA。 您需要做的就是在图像下添加一个按钮模块并对其进行自定义以包含图标字体，并使其以一些自定义间距与图像重叠。

在主页布局上找到“关于我们”部分。 然后在用于展示“双人房”的图像中直接添加一个按钮模块（它是三列行的第一列中的第一个）。

然后打开按钮设置并在按钮文本框中输入一个大写的“P”。 一旦您选择优雅字体作为按钮字体，这将变成我们的图标。

要快速开始将按钮的设计与布局相匹配，请保存您的按钮设置并在布局的顶部找到“立即预订”按钮。 打开按钮设置并通过右键单击按钮选项切换标题并从列表中选择“复制按钮样式”选项来复制按钮样式。

现在右键单击您在图像下添加的按钮模块，然后选择“粘贴按钮样式”。

然后更新按钮设置如下：

按钮字体：优雅字体
按钮边框宽度：0px
显示按钮图标：否

然后让我们添加我们漂亮的自定义填充以确保按钮是一个完美的正方形：

自定义填充：顶部 0.65em，底部 0.65em，左侧 1em，右侧 1em

要定位按钮使其与图像的右下角重叠，您首先需要去掉上面图像模块的底部边距。 在按钮正上方打开图像的图像模块设置，并将底部边距设置为 0px。

现在我们需要使用等于按钮高度的自定义负边距值将按钮拉到图像上。 为此，我们需要确定按钮的高度。 正如本文前面提到的，使用自定义填充就位，我们可以根据当前按钮文本大小知道按钮的确切大小。 由于按钮文本大小为 20px，我们知道按钮的高度为 3em（按钮文本大小的 3 倍），即 60px。 因此，我们需要为我们的按钮设置自定义边距，如下所示：

自定义边距：-60px 顶部

然后我们可以通过将按钮对齐调整为右侧来将按钮定位在右侧。

现在我们已经为我们的图像和按钮设计了一个可行的设计。 我们需要做的就是向该部分中的所有图像添加相同的按钮。

由于我们去掉了图像的底部边距，我们可以使用扩展样式轻松地将该更改应用于该部分中的所有图像。 右键单击图像并选择“扩展图像样式”。

在“扩展样式”弹出窗口中，为“贯穿”选项选择“本节”，然后单击扩展按钮。 现在所有图像的底部边距都是 0px。

最后一步是简单地复制和粘贴每个图像下的按钮模块。

这是最终的设计。

而且因为我们使用了适当的间距技术，该按钮也将在移动设备上保持原位......

使用按钮模块可用的图标

由于按钮模块按钮文本仅限于键盘上可用的字符，因此您需要探索这些键以找到与每个键关联的可用图标。 一个简单的方法是创建一个按钮模块，将按钮字体设置为优雅字体，然后在按钮文本框中键入字符。

这是带有相应字体图标的字符的屏幕截图：

如果您发现此过程受到限制，您始终可以使用文本模块使用此处列出的 unicode 创建图标链接。

最后的想法

使用带有 Divi 按钮模块的优雅图标字体是为您的网站创建单个图标按钮的便捷方式。 这为通过模块设置获得创意打开了一些大门，以使用独特的文本样式、悬停效果等自定义按钮。 我特别喜欢那些自定义按钮间距值，它确保按钮呈现完美的正方形或圆形。

图标按钮有很多用途。 希望我介绍的示例用例将为您自己的项目增添一点灵感。

有关更多想法，请查看如何使用 Elegant Icon Font 或如何在您的网站上嵌入图标字体。

我很乐意在下面的评论中提出您的一些想法。

干杯!