将类添加到wordpress中的单个列表项答案

【问题标题】：add class to individual list item in wordpress将类添加到wordpress中的单个列表项
【发布时间】：2014-05-27 18:48:23
【问题描述】：

问题

我正在使用 wordpress 和 fontawesome 图标库为每个列表项添加图标。我通过从屏幕选项的“显示高级菜单属性”启用“CSS Classes”为每个列表项添加了类。我尝试了 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”元素。请建议任何代码 sn-ps 或演练。

【问题讨论】：

首先，WP 不会像那样构建导航。其次，您绝对可以通过 WP Appearance=>Menu 设置将类放在 li 元素上，但是您的示例代码包含带有类的 <i> 元素，而您不能 i> 通过 WP 菜单设置获取。

标签： html css wordpress font-awesome

【解决方案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>

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

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

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

【讨论】：