[Resolved] Menu Icons

Home Forums Support Menu Icons

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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

    #1319039
    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/

    #1319385
    David
    Staff
    Customer Support

    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

    #1319484
    Ash

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

    #1319493
    David
    Staff
    Customer Support

    Ash – your Woocommerce Load More plugin installs FontAwesome

    #1320337
    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

    #1320440
    David
    Staff
    Customer Support

    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

    #1324841
    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

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