该图标是任何类型设计的完美补充。 许多图标是公认的 。 在机场乘坐公共厕所标牌。 无需了解当地语言,如果您不熟悉当地语言,则可以从门前使用的图标立即掌握哪个厕所适合女士们使用,哪个厕所适合绅士们使用。

同样的事情也可以应用于网站; 显示图标可以帮助用户浏览您的网站。 这有助于提高用户体验,并使网站看起来更漂亮。

但是在像WordPress 这样的 CMS中显示这样的图标可能是一个挑战。 如果您的网站是基于顶级WordPress构建的,那么我们将在这里向您展示在WordPress菜单中显示图标的最简单方法 。

入门

使用名为Menu Icons的WordPress插件可轻松在WordPress中添加图标 。 首先,安装并激活此插件。

wordpress菜单图标代码大全 wordpress 图标_人工智能

wordpress菜单图标代码大全 wordpress 图标_人工智能

现在我们准备添加图标。

新增图示

对于此示例,我想使用TwentyTwelve,一个漂亮干净的WordPress主题。 我还创建了一些要包含在菜单中的页面。

通过外观>菜单创建一个新菜单。 不要忘记分配菜单位置,除非它不会出现在网站上的任何地方。

wordpress菜单图标代码大全 wordpress 图标_wordpress菜单图标代码大全_03

wordpress菜单图标代码大全 wordpress 图标_wordpress菜单图标代码大全_03

然后,我们将为每个项目添加一个图标。 首先,让我们展开菜单项之一。 您会找到一个标题为Icon的链接:Select icon 。 点击“选择图标”开始选择。 在这里,您将看到一个类似于WordPress媒体库的窗口。

在撰写本文时,此插件带有3个字体图标库,即Dashicons , Genericons和FontAwesome 。

但是,即使我们自由使用任何图标,也最好从一个库中导出图标,因为它们每个都有自己的特征,例如大小和曲线。 换句话说,如果您使用FontAwesome,请在整个网站上使用它。 这样做可以保持图标的一致性并使它看起来更加统一。

wordpress菜单图标代码大全 wordpress 图标_java_05

wordpress菜单图标代码大全 wordpress 图标_java_05

选择图标后,您将在右侧面板上看到预览。 在右侧面板中进行一些调整。 您可以将图标放置在菜单之前或之后 ,控制字体大小,并设置垂直对齐方式。 设置完成后,单击“ 选择”

wordpress菜单图标代码大全 wordpress 图标_人工智能_07

wordpress菜单图标代码大全 wordpress 图标_人工智能_07

最终思想

菜单图标是一个非常方便的插件,用于在菜单中添加图标。 它与使用非常直观的WordPress UI模式很好地集成在一起。 此外,开发人员还计划为下一个版本提供一些新功能,包括添加更多的图标库以及上载自定义图标的功能。

希望您喜欢并发现此技巧有用。 继续尝试插件。

翻译自: https://www.hongkiat.com/blog/wordpress-menu-icon/