Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #26719

    Hi there,

    Just wondering if there is a way to have icons beside menu/menu items?

    For example as of now it is:

    Home || Services || FAQ ||

    I want it to be:

    [icon] Home || [icon] Services || [icon] FAQ ||

    The icons will ofcourse be custom, I’ve got them ready to go, just wondering how to implement it.

    Thanks so much,



    Can anyone help me with this?




    Second this.


    Yes this is possible. You can insert html code into the title fields (eg just insert a simple image html tag: ) or use the shortcode generator (magic wand icon in the tinymce editor field on the post/page editor screen) to generate a font icon shortcode and insert the shortcode into the title field of the menu item.


    Hi Dude,

    Thanks for your reply; the html method works, the shortcode method doesn’t.

    However when i use the html method, text isnt aligning properly, as in vertical alignment.

    The icon would appear, but the text would be at the bottom of the icon, like in the image attached.

    I know the image isn’t linked properly, I’m just putting the code in to get a screenshot.

    How can i get the text of the menu to vertical align to the size of the icon?





    Maybe you can add a negative top margin for each menu item.

    #menu-item-755 a {
    margin-top: -10px;


    .main_menu ul:first-child > li a {
    margin-top: -10px;

    Please give us a link to your website.



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Adding Icons next to Menu Items’ is closed to new replies.