How to add social icons to Primary Menu

  • I would like to add social icons to my main menu and even though there are dozens of plugins available I can’t find a single one that adds them to the primary menu. They all seem to be for widgets or posts/pages, or to have them float. (Well, I did find one for the menu, but it doesn’t work and the buttons end up being invisible — apparently this happens to a lot of people that use it, so I gave up on that one.)

    I am using the Tempera theme and it allows me to add them to the top bar, the footer, or the sidebars — but not the primary menu!

    my website is: https://www.astralingua.com/makeitso

    I am still very new to WP and code, but I can enter custom CSS lines within the settings of the tempera theme. If there is a plugin I should try or anything else, I’m willing to try whatever will work.

    I would like the ability to set the color/size/shape of the icons, and have them change with hover if possible. But most important I’d just like to get them in the main menu so I can have them visible and streamlined!

    Thank you very much for your help.

Viewing 1 replies (of 1 total)

  • I don’t know of any plugins that do this.

    But i think what you are trying to do is something like what Twenty Fifteen does, it has the option to have ‘Social Icons’ as a primary menu.
    Check out my blog it uses GitHub, Facebook, Twitter and a few other icons, there are heaps of social icons you can use.

    Technically you could go into the Twenty Fifteen code and find out how it does this, its probably in the sidebar.php and the css for menu items.

    One little bit of info that might help you on your journey is:

    While on the ‘Menus’ page in the WP Admin, click on ‘Screen Options’ at the top of the page, you will see some extra options available to you for the menu items such as ‘CSS Classes’ – now if are familiar with Font Awesome and Genericons (icons used in WP Admin menu), then you might be able to add a social icon in a primary menu by adding the appropriate CSS Class in the field provided.

    example: if you add

    genericon genericon-wordpress

    to the CSS Class field in a primary menu, does the WordPress symbol show up next to that menu item on the front end? You may need to include the appropriate css style sheets in your functions folder to get this work. (i do know this does work on some themes)

Viewing 1 replies (of 1 total)
  • The topic ‘How to add social icons to Primary Menu’ is closed to new replies.