WordPress.org

Ready to get started?Download WordPress

Forums

Problem adding iconmoon svg fontface-icons to WP (6 posts)

  1. diggeridoo
    Member
    Posted 1 year ago #

    Hi,
    I have a problem trying to add some icons to the menus (and buttons) of my webpage.
    As described in iconmoon documentation, I have to attach a <span> label to the html to locate the icon and then control it by css.

    The problem is that wordpress has not an editable index.html file where i could put the this label:
    <span data-icon="!" aria-hidden="true"></span>
    The id of the menu is generated by the php engine on the fly, so, how can I edit the php to locate the menu id and add the <span> label?

    Any orientation about this will be welcome.
    Thank you!

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Assuming you are using wp-Nav_menu, you can change the menu id via the menu_id attribute. Similarly, the <span></span> markup could be added via the link_before and link_after attributes.
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

  3. diggeridoo
    Member
    Posted 1 year ago #

    I think this is the related php code of the header:

    <div id="mainNav">
    			<?php wp_nav_menu( array('menu_class' => 'sf-menu', 'theme_location' => 'main', 'fallback_cb' => 'default_nav' )); ?>
    		</div>

    The menus are in a array, and I think the id I'm looking for is the 'main'
    I'll take a look to your reference, thx.

  4. diggeridoo
    Member
    Posted 1 year ago #

    Hi, I have achieved putting the icon in the menu with the link_before attribute, but it appears repeated in all the items of the array.
    How can I isolate each menu item for assign a different icon each?
    This is the code:

    <div id="mainNav">
    			<?php wp_nav_menu( array('menu_class' => 'sf-menu', 'theme_location' => 'main', 'link_before' => '<span class="principal" data-icon="! " aria-hidden="true"></span>', 'fallback_cb' => 'default_nav')); ?>
    		</div>

    Ps. Sorry for my inexperience :(

  5. esmi
    Forum Moderator
    Posted 1 year ago #

    How can I isolate each menu item for assign a different icon each?

    That is going to involve building your own custom walker object.

  6. diggeridoo
    Member
    Posted 1 year ago #

    That is going to involve building your own custom walker object.

    Oh my Gosh…

Topic Closed

This topic has been closed to new replies.

About this Topic