Wordpress 中的图片导航菜单答案

【问题标题】：Picture to nav menu in WordpressWordpress 中的图片导航菜单
【发布时间】：2012-11-12 00:46:28
【问题描述】：

我会向你寻求帮助，因为我太长时间找不到解决这个问题的方法了。

是否有一些简单的方法可以用 CSS 图标替换 wordpress 菜单中的文本？我需要在 http://www.monetaria.cz 的主菜单中插入图片。我尝试在菜单项规范中使用类，对于擦除文本，我使用了 text-indent bud，它解决了这个问题

非常感谢，

约翰

【问题讨论】：

我建议您编写一个自定义菜单漫游器，它将在您的顶级菜单项中添加一个 <span class="icon"></span> 元素。然后，您可以向每个元素添加一个自定义类（从 WordPress 仪表板中的外观 > 菜单）并相应地设置 span.icon 的样式。您可以看到示例代码here - 它并不完全适合您的需求，但根据您的需求进行修改应该不难。
您可以简单地使用text-indent:-9999 将文本推离屏幕，然后定位每个元素并为其提供图像。您可以使用 CSS 制作背景图片，或使用 jQuery 插入图片。为此创建一个助行器似乎有点过头了。
Ohgodwhy：非常感谢您的回复，我使用了 text-indent: -9999 但这就是我在图片中展示的内容以及为什么我不能使用这种方式解决问题跨度>
@NikolaIvanovNikolov 非常感谢您的回复，我已经看过了，但是，当我在外观>菜单中定义类时，我使用了这种方式，然后我在 css 中定义了背景，但它仍然没有功能我会告诉你我的 css: .ico { text-indent: -9999px;背景图像：网址（图像/信封图标.png）！重要；背景重复：不重复！重要；宽度：50px； }

【解决方案1】：

您可以将 HTML 直接添加到菜单项中，WP 会正确呈现它，所以如果您添加类似这样的内容

<img src="source.jpg" />

进入自定义链接的Label 字段，然后在URL 字段中输入您希望菜单项进入的任何链接，然后WP 会将<img> 标记呈现为图像并将其包装在链接到您指定的网址

【讨论】：