Menu Icons

[Brian]

Hi,

My name is Brian Thompson. I am trying to add icons to the primary navigation. I have installed the following plugin:

https://wordpress.org/plugins/menu-icons/

Initially it did work but I have added it to a new site, and I can add icons but when I hit “save menu”, the icons I have selected haven’t been saved. I am using wordpress 5.4.1 and Php 7.2 (I had it at 7.3 but I thought downgrading it would help but no joy.) Is there another plugin you would recommend or another way that I could add icons?

Kind Regards,

Brian Thompson

[Ash]

I just use icon class in the navigation label, saves on having a plugin

For example: <i class=”fa fa-home”></i> Home

https://fontawesome.com/v4.7.0/icons/

[David]

Hi there,

Ashes method does work but you would need to install the FA Icons plugin:

https://docs.generatepress.com/article/font-awesome/

The alternative is to upload your own icon images to your site and then you can add them directly in the Navigation label like so:

<img class="menu-icon" src="the_full_url_to_image_goes_here" width=50 height=50 />Your menu label

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ash]

Mine works without the plugin strangely, unless another plugin is loading FA

[David]

Ash – your Woocommerce Load More plugin installs FontAwesome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

Hi David,

Thank you for getting back to me. I installed font awesome, which asked me for my email for a custom script. I added it to the wp_head hook. I want the icons to appear along side the menu items of the primary navigation but so in the class I added in the class attribute of the menu “fas fa-play” for example but when I saved it, i noticed that the icon was above menu item and not to the left of it. Also, I found I couldn’t change the colour of the icon.

I am a bit out of my dept so any assistance would be greatly appreciated.

Kind Regards,

Brian Thompson

[David]

If you go to the Font Awesome icon website each icon provides the HTML for the icon.
For example:

https://fontawesome.com/icons/play?style=solid

You can copy the HTML – in the example:

<i class="fas fa-play"></i>

And paste this into the Navigation Label – followed by any text you may require

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Brian]

Hi David,

Thank you for your reply. I got it working by the FA Kit with the .js in the header. Thank you for all your help, it is much appreciated.

Kind Regards,

Brian Thompson

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts