add class to individual list item in wordpress

4 Views

Problem

I am using wordpress and fontawesome icon library to add icon to each list item. I have added class to each list item by enabling “CSS Classes” from “Show advanced menu properties” from Screen option. I tried wp_nav_menu and various other tricks but failed to output class like fa fa-home

Code

<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 want to output those classes individually to each “i” element in list item. Please, suggest any code snippets or walk-through.

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. This code (from your question) is not standard WP code – yours is including <i> elements:

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

    WP outputs menus like so, without the <i> element:

    <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>

    Notice the class fa fa-home on the <li> element above? That was added by adding the class (just like you described). Additionally, it created the icon desired in the menu.

    If you aren’t getting the icon, ensure that font awesome is actually being loaded, and that the font files are installed and in the right directory relative to the font awesome stylesheet.

    How are you adding the <i> elements? The only way you could achieve this (using the technique you are trying to use) would be to Write a custom menu walker, but that’s a lot of work to add the icons, since you an add them simply by editing the class via the Menu dashboard.