Viewing 1 replies (of 1 total)
  • Plugin Author AcumenConsulting

    (@acumenconsulting)

    I’m sorry this went so long without being answered. We did not see the email notification of your post.

    It is important to note that this is listed as a plugin for developers, so you must have a good handle on programming CSS in order to control it properly.

    To use the icon element, you should:
    1. Assign a class to the menu item(s) you want a unique icon for. To add unique classes to menu items, you must enable “CSS Classes (optional)” input box for specific menu items using the “Screen Options” when in the menu editor. You will use this unique class to target the internal span for the icon itself. For more information, please see: http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

    2. Set the icon image using the span with class=”descriptive-menu-icon”, rendered by the plugin when the icon option is checked. The plugin uses spans inside the List Item element for each menu item to allow for styling. These spans have classes that let you assign the icon image and style the text through CSS. Some example CSS for this, which floats the icon left and the link text right:

    .my-menu-item-class {display:block;overflow:hidden}
    .my-menu-item-class .descriptive-menu-icon {float:left; background: url(‘images/icon.jpg’ center no-repeat; width:33px; height:33px;margin-right:10px;}
    ..my-menu-item-class .descriptive-menu-link {float:right;color:red}

    Here is a full list of the DOM elements the widget produces for styling control:

    #descriptive_menu-[id] – This is the wrapper for the whole widget #descriptive_menu-[id] .widget-title – This is the title of the widget #descriptive_menu-[id] .descriptive-menu – This is the actual menu object #descriptive_menu-[id] .descriptive-menu-link – This is a span wrapper around the menu item anchor text.
    #descriptive_menu-[id] .descriptive-menu-icon – This is an empty span you use to display the icon. Add menu item classes to add specific icons for items.
    #descriptive_menu-[id] .descriptive-menu-description – This is the description paragraph, which contains the description assigned to the menu item (optional setting on WordPress menu items)

Viewing 1 replies (of 1 total)
  • The topic ‘How to use icon element?’ is closed to new replies.