如果您曾经浏览过某个网站并想知道他们是如何制作菜单图标的,那么您来对地方了。 WordPress 菜单图标为您的网站添加视觉元素,并结合相关图标进一步引导用户访问所需页面。

简而言之,菜单图标是一种简单、非侵入性的方式,可以让您的网站看起来更专业,同时为用户提供更多便利。

而且,添加 WordPress 菜单图标只需使用正确的插件的几个步骤。您无需自定义代码菜单设计或担心复杂的设置。

继续阅读以了解如何添加这些 WordPress 菜单图标并为您的行业和业务找到完美的视觉效果。

?目录:

要轻松添加 WordPress 菜单图标,您可以使用 ThemeIsle 插件提供的免费菜单图标。它是迄今为止实现所需效果的最简单插件,您将收到令人印象深刻的图标集,包括 Font Awesome、Fontello 和 Genericons 中的选项。

接下来,我们将向您展示如何设置插件。

如何快速添加您的第一个菜单图标

我们将在本文后面介绍更多行业特定的图标,但现在是时候为您的一些菜单添加即时图标了选项卡上的菜单。

注意:我们假设您已经配置了 WordPress 菜单。如果不是这种情况,请转至本文(或这篇关于多级下拉菜单的文章)以了解如何设置 WordPress 菜单。

如果您有兴趣,ThemeIsle 的插件文档提供了有关如何添加菜单图标的快速指南。我们也将在这里进行更深入的探讨。

首先,转到您的 WordPress 仪表板并单击外观 → 菜单。

假设你已经有一个菜单,您应该能够在“菜单结构”标题下看到菜单项。对于多个菜单,您必须选择要编辑的菜单。左侧还有一个名为“添加菜单项”的模块,它允许您从页面、帖子、自定义链接等制作菜单选项卡。

找到正确的菜单并添加图标

要添加WordPress菜单图标,选择任意菜单您已经创建的项目。

找到图标:选择链接。单击按钮导航到该部分以将图标添加到该特定菜单项。

默认情况下,ThemeIsle Menu Icons 插件显示来自 Dashicons 集合的图标选项。随意滚动列表并选择适合实际菜单标题的图标。

例如,定制器(笔/笔)图标将与博客的菜单图标相关联。

您也可以按键按单词搜索图标,或使用类别过滤器查找不同类型的图标。

点击你想要的使用菜单项的图标。这将突出显示该图标并在其旁边放置一个复选标记。

在右侧,在激活图标之前,您会看到一些要配置的设置。

这些包括:

  • 隐藏标签 – 删除文本标签,只留下图标(适合社交媒体图标)。
  • 位置 – 移动图标相对于文本的位置。
  • 垂直对齐——移动图标的垂直位置。
  • 字体大小 – 放大或缩小图标的大小。

是预览区域,提供调整设置时菜单项外观的示例。例如,增加字体大小并将图标的位置移动到“后面”将导致新的预览。

确保想要的图标仍然突出显示它,然后单击“选择”按钮将其添加到菜单中。

确保点击“保存菜单”以激活该图标。

如果您想更改某些内容,您可以随时选择“删除”链接重新开始。

正面视图- end menu New Icon

检查图标是否实际出现在您的网站上。

通过查看实时网站,您可以查看它是否看起来不错,或者图标设置是否需要进一步调整。

疑难解答

如果看不到图标或某些菜单项,请确保菜单设置配置正确。最重要的部分是为该菜单分配一个“显示位置”,例如将其分配到“主菜单”位置。

勾选“菜单”部分中的“管理位置”选项卡也很重要,因为您可能会发现错误的菜单分配给了主菜单。

如何激活所有支持图标包

ThemeIsle 插件的菜单图标支持以下图标包:

  • Dashilar
  • Elusive
  • 字体是awesome
  • Basics
  • Generic
  • Images
  • SVG

默认情况下,插件设置仅显示 Dashicons,但您可以根据需要激活其他图标集。但是,您应该尽量限制加载的图标集的数量,因为每个额外的图标集都会对您网站的性能产生很小的影响。

要激活所有或部分图标类型,请转到仪表板中的外观 → 菜单。

选择菜单图标“设置”选项卡。

打开所有菜单图标合集/source

你会在全局选项卡下看到各种图标类型:

选中要添加为选项的图标集。

单击“保存设置”按钮继续。

添加就OK了新图标的菜单项。

单击项目的选择按钮。

探索其他来源的图标

您现在应该会在窗口左侧看到几个图标类别的列表。

注意:如果您没有看到新的图标类别,请尝试刷新页面或保存菜单。

现在,如果你是在搜索字段中输入“store”,您会在每个图标集中看到几个不同的图标。

比如Foundation集合为这个搜索提供了两个图标,一个是购物袋,一个是购物车。

使用完全相同的搜索Word, Font Awesome 提供了三个额外的图标,它们与 Foundation 集合略有不同。

喜欢上面的教程As通常,选择一个图标并单击“选择”将其添加到菜单中。

记得点“保存”菜单”按钮。

现在,既有以前的博客图标和商店图标,但这次来自不同的图标来源。

如何添加图片附件和 SVG 附件

此插件还允许上传 SVG(矢量)和图像文件。

这意味着您可以制作自己的图像或矢量图标并上传它们,或者您可以从其他地方在线找到很酷的图像图标。

同样,转到外观 → 菜单,然后单击所选菜单项的选择链接。

SVG和图片文件不同之处在于,它们通常需要在上传到 WordPress 之前调整到理想大小;否则,图像可能太大或太小,影响菜单设计。

要继续,请上传一个非常小的图像(这取决于您的主题,但 50×50 像素是一个很好的起点),突出显示该图像,然后单击“选择”。

你应该能看到图片图标显示在菜单的后端。

之前会显示在图标旁边,但图像会更有特色。

开始使用WordPress菜单now Icons

说到 WordPress 菜单图标,好处很多。

它们不仅让您的网站充满活力,而且还为导航添加了额外的用户友好元素。

幸运的是,ThemeIsle 插件创建的菜单图标(Menu Icons)使得只需点击几下即可轻松实现图标、图像和 SVG 图标。

有关增强 WordPress 菜单的其他方法,请查看以下指南:

如果您对 WordPress 菜单图标有疑问,请在评论中告诉我们。