您想将图像图标添加到您的WordPress导航菜单中吗？图片可以帮助访问者一目了然地了解您网站的导航。您甚至可以使用图标来突出显示菜单最重要的内容或号召性用语。在本文中，我们将向您展示如何在WordPress中的导航菜单中添加图像图标。
为什么要在WordPress中添加带有导航菜单的图像图标？
通常，WordPress导航菜单是纯文本链接。这些链接适用于大多数网站，但它们并不总是看起来有趣或引人入胜。
通过将图像图标添加到导航菜单，您可以鼓励访问者关注菜单并浏览您网站的更多内容。
如果您的菜单有很多不同的选项，那么图像图标可以使访问者更轻松地扫描内容并找到他们正在寻找的内容。这可能是增加网页浏览量和降低WordPress跳出率的简单方法。
您甚至可以使用图像图标来突出显示最重要的菜单项，例如在线市场中的结帐链接。
通过在菜单中突出显示号召性用语，您通常可以获得更多的注册、销售、会员和其他转化。
方法1：使用插件将图像图标添加到导航菜单（快速简便）
将图标添加到WordPress菜单的最简单方法是使用菜单图像。该插件带有仪表板图标，您只需单击几下即可添加。
如果您在网站上设置了字体真棒，那么您可以使用菜单图像轻松地将这些图标添加到导航菜单中。
另一种选择是使用WordPress媒体库中的图像或图标。
您需要做的第一件事是安装并激活菜单图像插件。
激活后，单击WordPress仪表板中的菜单图像。在此屏幕上，您可以选择是获取安全和功能通知还是单击“跳过”按钮。
这将带您进入一个屏幕，您可以在其中配置插件的设置。首先，您将看到可用于图像图标的所有不同大小。
如果您打算使用字体真棒或破折号图标中的图标，则菜单图像将自动调整它们的大小。但是，如果您使用媒体库中的图像，则需要手动选择大小。
该插件支持默认的WordPress图像大小，例如缩略图，图像和大图像。它还添加了三个唯一大小，默认情况下设置为 24×24、36×36 和 48×48 像素。
这些设置应该适用于大多数网站，但您可以通过为第一个、第二个或第三个菜单图像大小键入不同的数字来放大或缩小图标。
当您向菜单添加图标时，默认情况下，您会看到一个“悬停时的图像”字段。这允许您在访问者将鼠标悬停在该菜单项上时显示不同的图标。
请注意，此设置仅在使用自己的图像时可用。如果您打算使用仪表板图标或字体真棒图标，则无需担心“悬停时的图像”功能。
显示不同的图标可以帮助访问者查看他们在导航菜单中的位置。如果您的菜单包含许多不同的项目，这将特别有用。例如，您可以使用不同的颜色或图标大小来突出显示当前选定的项目。
如果要创建不同的悬停效果，请确保选中“在悬停字段上启用图像”。
完成后，单击“保存更改”以存储您的设置。
要将图标添加到导航菜单，请转到外观»菜单。默认情况下，WordPress将显示您网站的主菜单。
如果要编辑其他菜单，只需打开“选择要编辑的菜单”下拉菜单，然后从列表中选择一个菜单即可。之后，点击“选择”。
现在，将鼠标悬停在要添加图标的第一个菜单项上。当出现“菜单图像”时，单击它。
您现在可以决定是使用自己的图像还是选择现成的图标，例如字体真棒图标。
要使用现成的图标，请单击“图标”旁边的单选按钮。
然后，您可以单击以选择任何仪表板图标或字体真棒图标。
您想改用自己的图像吗？然后选择“图像”旁边的单选按钮，然后单击“设置图像”链接。
您现在可以从WordPress媒体库中选择图像，也可以从计算机上传新文件。
如果您在插件的设置中选中了“悬停时启用图像字段”，那么您还需要单击“悬停时设置图像”。
现在，选择要在用户将鼠标悬停在此菜单项上时显示的图像。
有时，您可能希望忽略此设置，无论如何都显示相同的图标。为此，请单击“悬停时设置图像”，然后选择完全相同的图标。
如果您不选择图像，则当访问者将鼠标悬停在其上时，图标将完全消失。
之后，打开 图片尺寸 下拉列表并从列表中选择一种尺寸。
对所有图标使用相同的大小往往会使菜单看起来更有条理。但是，有时最好为最重要的项目使用更大的图标。
例如，如果您使用WooCommerce等插件创建了一个在线商店，那么您可以使用更大的图标进行“结帐”，使其脱颖而出。
当您对图标感到满意时，是时候查看菜单项的标签了。默认情况下，插件在图标后显示标题标签。
要更改此设置，请选择“标题位置”部分中的任意单选按钮。
另一种选择是完全删除导航标签并创建仅图标菜单。如果您的菜单有很多项目，那么这可以使其看起来不那么混乱。
但是，仅当每个图标的含义很明显时，才应隐藏标签。如果不清楚，那么访问者将很难浏览您的WordPress博客或网站。
要继续并隐藏标签，请选择“无”旁边的单选按钮。
如果您对菜单项的设置方式感到满意，请单击“保存更改”。
要将图标添加到其他菜单项，只需按照上述相同过程操作即可。
完成后，不要忘记单击“保存菜单”按钮。现在，如果您访问WordPress网站，您将看到更新的导航菜单。
方法2：使用代码将图标添加到WordPress菜单（更可定制）
您还可以使用 CSS 将图像图标添加到导航菜单中。
通过这种方式，您可以准确控制图标在菜单中的显示位置。您还可以使用任何图像作为图标，因此这是添加自己的品牌的好方法。
在开始之前，请继续上传要用作图标的所有图像文件。这些可能是库存照片、你在网上找到的免版税图片，或者使用 Canva 等应用创建的自定义图形。
将每个图像添加到WordPress媒体库后，请确保复制其URL并将其粘贴到记事本等文本编辑器中。在下一步中，您将需要所有这些链接。
要查找图像的URL，只需在WordPress媒体库中选择它，然后查看“文件URL”字段。
之后，您需要转到 外观 » 菜单。
接下来，打开“选择要编辑的菜单”下拉菜单，然后选择要添加图像图标的菜单。
之后，继续并单击“选择”。
接下来，您需要通过单击“屏幕选项”来启用自定义CSS类。
在显示的面板中，选中“CSS 类”旁边的框。
完成此操作后，您可以将自定义CSS类添加到导航菜单中的任何项。这就是您将每个菜单项链接到WordPress媒体库中的图像的方式。
您可以随意调用这些类，但最好使用有助于识别菜单项的内容。
要开始使用，只需单击要添加图像图标的第一个项目。在“CSS 类（可选）”字段中，键入要使用的类名。
您将在下一步中使用这些自定义 CSS 类，因此请在记事本或类似应用中记下它们。
只需按照相同的过程为所有菜单项添加单独的类。之后，单击“保存菜单”以存储您的设置。
现在，您可以使用CSS将图像图标添加到WordPress导航菜单中。
通常，WordPress教程会告诉您将代码片段添加到WordPress主题文件中。但是，这样做可能会导致常见的WordPress错误，并且对初学者不是很友好。
这就是我们推荐WPCode的原因。
WPCode是超过1万个WordPress网站使用的最受欢迎的代码片段插件。它允许您添加自定义代码，而无需编辑主题的功能.php文件。
您需要做的第一件事是安装并激活免费的WPCode插件。
激活后，转到代码片段 » 添加代码段。
这将带您进入“添加代码段”页面，您可以在其中看到WPCode的现成代码片段库。其中包括允许您通过禁用XML-RPC来提高WordPress安全性的代码片段，上传WordPress默认不支持的文件类型等等。
只需将鼠标悬停在“添加自定义代码”上，然后在出现时单击“使用代码段”。
首先，键入自定义代码段的标题。这可以是帮助您识别WordPress仪表板中代码段的任何内容。
完成后，打开“代码类型”下拉列表，然后选择“CSS片段”。
在代码编辑器中，您需要为要显示的每个图标添加一些代码。
为了帮助您，我们在下面创建了一个示例代码段。您可以继续将“.carticon”更改为您在上一步中创建的自定义CSS类。您还需要将URL替换为WordPress媒体库中图像的链接：
.carticon {background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png');background-repeat: no-repeat;background-position: left;padding-left: 5px;}
注意：您需要在代码片段中将点 ‘.“ 保留在 CSS 类的前面。这就是告诉WordPress它是一个类而不是另一种CSS选择器的原因。
您需要针对上面创建的每个菜单项调整上面的代码段。
当您对代码感到满意时，请滚动到“插入”部分。WPCode可以将代码添加到不同的位置，例如在每个帖子之后，仅前端或仅管理员。
要在整个WordPress博客或网站上使用自定义CSS代码，请单击“自动插入”（如果尚未选择）。
然后，打开“位置”下拉菜单并选择“站点范围标题”。
之后，您就可以滚动到屏幕顶部并单击“非活动”切换，使其更改为“活动”。
最后，单击“保存代码段”以使自定义CSS生效。
现在，如果您访问您的网站，您将在导航菜单中看到所有图像图标。
根据您的WordPress主题，您可能需要调整CSS，使其在正确的位置显示图像图标。如果是这种情况，请前往 代码片段 » 代码片段 在WordPress仪表板中。
然后，只需将鼠标悬停在代码段上，然后在出现时单击“编辑”链接。
这将打开代码编辑器，该编辑器已准备好供您进行一些更改。
