html - 将类添加到wordpress中的单个列表项

Question

问题

我正在使用 wordpress 和 fontawesome 图标库将图标添加到每个列表项。我通过从屏幕选项的“显示高级菜单属性”启用“CSS 类”，为每个列表项添加了类。我尝试了 wp_nav_menu 和其他各种技巧，但未能输出像 fa fa-home 这样的类

代码

<ul id="primary-menu">
    <li><a href=""><i class="fa fa-home"></i>home</a></li>
    <li><a href=""><i class="fa fa-user"></i>About</a></li>
    <li><a href=""><i class="fa fa-camera"></i>Gallery</a></li>
    <li><a href=""><i class="fa fa-gift"></i>Shop</a></li>
    <li><a href=""><i class="fa fa-bullhorn"></i>Blog</a></li>
    <li><a href=""><i class="fa fa-envelope"></i>contact</a>
</ul><!-- #primary-menu -->

我想将这些类单独输出到列表项中的每个“i”元素。请建议任何代码片段或演练。

Answer 1

此代码(来自您的问题)不是标准的 WP 代码 - 您的代码包括 <i>元素:

<ul id="primary-menu">
    <li><a href=""><i class="fa fa-home"></i>home</a></li>
</ul>

WP 像这样输出菜单，没有 <i>元素:

<ul class="menu">
    <li id="menu-item-8" class="fa fa-home menu-item menu-item-type-post_type menu-item-object-page menu-sample-page">
         <a href="http://www.example.com/sample-page/">Sample Page</a>
    </li>
</ul>

注意类fa fa-home在 <li> 上上面的元素？这是通过添加类添加的(就像你描述的那样)。此外，它还创建了菜单中所需的图标。

如果您没有获得图标，请确保实际加载了 font awesome，并且字体文件已安装并且位于与 font awesome 样式表相关的正确目录中。

您如何添加 <i>元素？实现此目的的唯一方法(使用您尝试使用的技术)是 Write a custom menu walker ，但是添加图标需要做很多工作，因为您只需通过菜单仪表板编辑类即可添加它们。