- This topic has 8 replies, 3 voices, and was last updated 7 months, 2 weeks ago by
David.
-
AuthorPosts
-
June 8, 2020 at 5:28 am #1319009
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
June 8, 2020 at 5:51 am #1319039Ash
I just use icon class in the navigation label, saves on having a plugin
For example: <i class=”fa fa-home”></i> Home
June 8, 2020 at 8:38 am #1319385David
StaffCustomer SupportHi 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/June 8, 2020 at 9:16 am #1319484Ash
Mine works without the plugin strangely, unless another plugin is loading FA
June 8, 2020 at 9:24 am #1319493David
StaffCustomer SupportAsh – your Woocommerce Load More plugin installs FontAwesome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 9, 2020 at 3:07 am #1320337Brian
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
June 9, 2020 at 4:52 am #1320440David
StaffCustomer SupportIf 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/June 12, 2020 at 4:21 am #1324841Brian
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
June 12, 2020 at 7:28 am #1325010David
StaffCustomer SupportGlad to hear that
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.