Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Dashicons in primary navigation menu

Home Forums Support Dashicons in primary navigation menu

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #403399
    Edward

    Hello, I see that I can activate dashicons for use in the front end by pasting in the following code to my php file

    add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ );
    function load_dashicons_front_end() {
    wp_enqueue_style( ‘dashicons’ );
    }

    I see that if I go in to Menus, and paste into my Navigation Label the HTML for a certain icon, such as Home

    <span class=”dashicons dashicons-admin-home”></span>

    Then the icon shows in place of the text. Cool! But I see that the icon shows up above the line of where the other nav menu items show, and if I do type in some text to go along with the icon, the text shows in line with the other menu items, but the icon still shows up above. I would love to know how to get this icon down on the level with the other items, and keep the option to include text with the icon.
    Thanks for any help on this.

    GeneratePress 1.4
    #403437
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    .menu-item .dashicons {
        display: inline;
        font-size: inherit;
        height: auto;
        width: auto;
        line-height: inherit;
        padding-top: 2px;
    }
    #403558
    Edward

    Thanks for the reply. That CSS gets most of the way there, but the “home” icon is still just a bit up above the line of the text menu items.

    #403646
    Tom
    Lead Developer
    Lead Developer

    You can try adding a bit of padding – I just adjusted the CSS above.

    #403658
    Edward

    After having tried numerous themes, I definitely working with GP the most. look forward to creating a few fun sites and bringing some friends along with me to the GP family. The options and support for this theme are really special.

    I tried adjusting the padding-top for the dashicon and that didn’t move it down. But I did achieve the desired result with Fontawesome, as seen with the icon next to the page Herb Dreams, by following the tips provided on

    http://www.rekitanicole.com/blog/2015/1/how-to-add-icons-to-your-navigation-using-font-awesome

    But use of the fontawesome icon changes the font of the menu item. When I change the font for the primary nav menu from inherit to ariel, my icon disappears!

    Advice? thx

    #403687
    Edward

    I solved the alignment issue, using the dashicons rather than fontawesome, by adding this to the above CSS
    vertical-align: -2px;

    #403698
    Edward

    I meant to mark this as resolved

    #403813
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for sharing your solution! 🙂

    #437636
    Thierry

    Hello,

    Please Tom, can you explain how i can display a fontawesome icon on primary menu ?

    Thx

    #437905
    Leo
    Staff
    Customer Support

    Here it is: https://docs.generatepress.com/article/adding-icons-to-menu-items/

    Please open a new topic if you need additional assistance.

    #437965
    Thierry

    of course, in fact i have a disalow html in wp-config.php

    it’s ok now, thanks Léo

    #438161
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.