- This topic has 8 replies, 3 voices, and was last updated 3 months, 1 week ago by David.
June 8, 2020 at 5:28 am #1319009Brian
My name is Brian Thompson. I am trying to add icons to the primary navigation. I have installed the following plugin:
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?
Brian ThompsonJune 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> HomeJune 8, 2020 at 8:38 am #1319385DavidStaffCustomer Support
Ashes method does work but you would need to install the FA Icons plugin:
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 labelJune 8, 2020 at 9:16 am #1319484Ash
Mine works without the plugin strangely, unless another plugin is loading FAJune 8, 2020 at 9:24 am #1319493DavidStaffCustomer SupportJune 9, 2020 at 3:07 am #1320337Brian
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.
Brian ThompsonJune 9, 2020 at 4:52 am #1320440DavidStaffCustomer Support
If you go to the Font Awesome icon website each icon provides the HTML for the icon.
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 requireJune 12, 2020 at 4:21 am #1324841Brian
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.
Brian ThompsonJune 12, 2020 at 7:28 am #1325010
- You must be logged in to reply to this topic.