[Resolved] Dashicons in primary navigation menu

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

[Tom]

Hi there,

Give this a shot:

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

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

[Tom]

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

[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

[Edward]

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

[Edward]

I meant to mark this as resolved

[Tom]

Awesome, thanks for sharing your solution! 🙂

[Thierry]

Hello,

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

Thx

[Leo]

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

Please open a new topic if you need additional assistance.

[Thierry]

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

it’s ok now, thanks Léo

[Leo]

No problem!

[Author]

Posts