[Resolved] How to add SVG Social Media Icon in Main Menu?

[Charbel]

Hello Team.,

Happy New Year! Hope you are doing well.

I have purchased GeneratePress Premium and I am migrating my website over the new Theme.
I would like to add SVG Social Media Icon in Main Menu.
I came across this article but it’s not clear to me on how to do it:
https://generatepress.com/forums/topic/svg-social-media-icon-in-menu/

My staging site is here: http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/
I am using Dispatch Theme.

I am using Lightweight Social Icons plugin by GeneratePress to add my Social Icons on the Side bar. It’s working fine.
However, I would like to add Social Media Icons in the Main Menu (right hand-side) only for Desktops/Tablets.
My aim is to have the following 4 icons (Facebook, Twitter, LinkedIn and YouTube).

Could you please guide me on how to do this?

Many Thanks!
-Charbel

[Leo]

Hi there,

There are a couple of methods to do this:

– If you are already using GenerateBlocks, you can try using the generate_menu_bar_items hook as instructed in the video here:
https://docs.generatepress.com/article/generate_menu_bar_items/

If you use the buttons block, then it comes with SVG icons:
https://docs.generateblocks.com/article/buttons-overview/
https://docs.generateblocks.com/article/icon-picker-overview/

– The Navigation Label field in the WordPress menu builder actually accepts HTML so you can add the icon HTML direct in there.

[Charbel]

Thank you Leo for your kind support, much appreciated!

I did not get the third option [The Navigation Label field in the WordPress menu builder actually accepts HTML so you can add the icon HTML direct in there.] The theme no longer bundles Font Awesome, so first I will need to include Font Awesome in my site. I don’t want to use this option because of the performance issue.
https://docs.generatepress.com/article/adding-icons-to-menu-items/

Could you please clarify further the first two options? I am new to GeneratePress Theme, I don’t have enough experience.

– If you are already using GenerateBlocks, you can try using the generate_menu_bar_items hook as instructed in the video here:
https://docs.generatepress.com/article/generate_menu_bar_items/

– If you use the buttons block, then it comes with SVG icons:
https://docs.generateblocks.com/article/buttons-overview/
https://docs.generateblocks.com/article/icon-picker-overview/

Thank You!

[David]

Hi there,

the latest version of the Font Awesome plugin allows you select SVG Icons:

https://wordpress.org/plugins/font-awesome/

This will only load the icons you use.

You can then use any of the icon HTML from the Font Awesome website in your Menu labels.

[Charbel]

Thank you, David, for your kind support, much appreciated!

I have come across your reply here that you don’t recommend using Font-Awesome for new site because of performance issue. #1144523 = https://generatepress.com/forums/topic/adding-font-awesome/

Could you please check my staging site here from Mobile Devices:
http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/
The social icons are showing on Mobile devices Menu but not on Desktops. Those were added under Widgets > Off-Canvas Panel. The Lightweight social menu is added there.

I am trying to avoid installing new Plugins that you mentioned above. Is it possible to have the same on desktops Menu as well?

Thank You!

[David]

The #1144523 was before they updated ( or i realised they had ) the plugin and added the SVG option. That would be the easiest method, then you can remove Light Weight Social icons instead 🙂

[Charbel]

Thank you so much David, much appreciated!

It’s working now on Desktops 🙂
Here is my staging site: http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/
I removed the Light Weight Social icons and gain some performance on Google PageSpeed Insights complaining about lightweight-social-icons/fonts/fontello.woff 🙂

I have a question though for mobile devices (Menu), the social icons are not showing next to each on mobile menu, they are showing in vertical mode. Is there any way to solve this with horizontal mode?

Thanks!

[Ying]

Hi Charbel,

You could try this CSS:

@media (max-width: 768px) {
#generate-slideout-menu .slideout-menu .menu-item-18498, #generate-slideout-menu .slideout-menu .menu-item-18500, #generate-slideout-menu .slideout-menu .menu-item-18501, #generate-slideout-menu .slideout-menu .menu-item-18502, #generate-slideout-menu .slideout-menu .menu-item-18499, #generate-slideout-menu 
    .slideout-menu .menu-item-18503 {
        width: 33%;
    }
}

I use 33% to place the 6 icons into 2 rows, if you’d like them in 3 rows, use (34% – 50%), or use 16% for 1 row display.

As you can see, the above CSS selector is long, it’ll be cleaner if you can add a class like social-iconto the social icon menu bar items. Then we can target them easier, the selector:
#generate-slideout-menu .slideout-menu .menu-item-18498, #generate-slideout-menu .slideout-menu .menu-item-18500, #generate-slideout-menu .slideout-menu .menu-item-18501, #generate-slideout-menu .slideout-menu .menu-item-18502, #generate-slideout-menu .slideout-menu .menu-item-18499, #generate-slideout-menu .slideout-menu .menu-item-18503

can be replaced by
#generate-slideout-menu .slideout-menu .social-icon

Let me know 🙂

[Charbel]

Hello Ying,

Thank you so much for your kind support!

Could you please guide me in more details about how to do the cleaner option you mentioned above?

If you can add a class like social-icon to the social icon menu bar items.

#generate-slideout-menu .slideout-menu .social-icon

Sorry, I am new to GeneratePress Theme and I don’t have much experience yet.

Here is my staging site: http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/

Many Thanks Ying!
-Charbel

[Gulshan]

Simply, Enter SVG code into Navigation Label. That’s it.

[Charbel]

Hello Kumar,

I am referring to the Mobile Menu. I have added the SVG code into Navigation Label and it’s showing on both Menus (Desktop / Mobile).

The issue is, the Social Icons on Mobile Menu are showing in Vertical Mode, I need then in Horizontal mode.
Desktop Menu is ok.

Thanks!

[Charbel]

Hello @Ying,

Please note that I solved the issue after digging more.

The issue is solved on Mobile devices Menu.

I used this CSS code after adding social-icon class in my Main Menu.

@media (max-width: 768px) {
#generate-slideout-menu .slideout-menu .social-icon {
	width: 16%; }
}

Many Thanks!

[Ying]

Awesome!
Glad you figured it out 🙂

[Charbel]

This case can be closed.

Thank You All!!!

[Ying]

You are welcome 🙂

[Author]

Posts