Add Custom Social Media Icon to the Divi Menu

Add Custom Social Media Icon to the Divi Menu

WP Zone

4 года назад

19,289 Просмотров

✅ Tutorial Link: https://wpzone.co/wordpress-and-divi-code-snippets/add-custom-social-media-icon-to-the-divi-menu/

———

✅ Divi Icon Party: https://wpzone.co/product/divi-icon-party/

———

❤️ Get in touch with WP Zone:

https://wpzone.co/contact/
https://www.facebook.com/wpzoneco/

———

📃 Video Transcript:
Hey everybody, David here from WP Zone.

Social media engagement is a major factor in the success of your website which is why links are usually placed close to the header. You can easily add social media icons to your Divi menu! Today I’ll show you two ways to put them in your primary menu. In the next video, I will add custom social media icons to the divi secondary menu and the divi footer. Okay! To accomplish this, you need to have font awesome icons embedded. If you haven’t done that yet, follow the link in the description and come back when you’re ready. Alright, go to Appearance and Menus in your WordPress dashboard. Create a new menu item in the primary menu and be sure to select the custom link option. Let’s say you love computer games as much as I do and you want to add a Twitch platform. Here is where you will paste the url to your Twitch profile. Go to the font awesome website and search for the twitch code and copy the html code. Paste the code to the Link Text box. Click add to menu. Refresh the page and it’s ready. Looks great! You can also stylize the icon with additional css. Style it as fonts and by default it takes styles from the theme customizer - heading and navigation - primary menu bar If you want to add something custom, you need to use a custom css class, for example ds-menu-icon, to the i tag.
And additional css code, for example:... Always remember to match your current design and brand identity. The alternative way to add social media icons to the primary menu is installing the Divi Icon Party Plugin. This plugin gives you way more social icons and comes already integrated with font awesome. Once your plugin is installed and activated, you can head to Divi theme options and under the general tab you'll now see that instead of just the standard Facebook Twitter Google+ and RSS icon fields there are fields for additional over 30 socials like Instagram Twitch Skype Snapchat Slack and more. I'm going to activate a few of these and enable the setting to include those icons in the main header then I'm going to Save Changes.
If I now refresh the page, you can see that alongside these standard social icons that come with Divi we now have the new ones and they are in the primary menu and the footer. With the Divi icon party plugin it's super easy to do you just enable the option! You can get the Divi Icon Party plugin as a standalone purchase or by becoming a Divi Space Annual or Lifetime Member! I’m David Blackmon and this concludes this Divi Space Snippet Series, thanks for watching! See you next time!


———


🎵 Track Info:
Title: Tropical Love by Nadro & Timmy Commerford
Genre and Mood: Pop + Happy


———

Thanks for watching!
Please subscribe! ❤️

Тэги:

#divi_tutorial
Ссылки и html тэги не поддерживаются


Комментарии:

Free_Will_Anarchy
Free_Will_Anarchy - 05.10.2023 18:15

They are scammers

Ответить
Staszek
Staszek - 13.09.2023 15:14

how to edit appearce of social icon added by divi icon party?

Ответить
Staszek
Staszek - 13.09.2023 14:57

is this solution still working?

Ответить
L Troniks
L Troniks - 25.01.2022 04:52

thanks much

Ответить
Saudagar Jalanan
Saudagar Jalanan - 04.05.2021 05:54

Hi, how can I make it so that after clicking, the social media page will open on a new page?

Ответить
Emma Segasture
Emma Segasture - 02.01.2021 22:58

does this work with vertical menus?

Ответить
Abdallah El Chaarani
Abdallah El Chaarani - 08.12.2020 18:21

hi there
is there a way to place these icons on the secondary menu

Ответить
Tom Fraser
Tom Fraser - 02.10.2020 07:08

I'm using latest version of Diiv and Builder, followed your instructions, but the icon doesn't appear on the menu...any thoughts ?

Ответить
Jakub Kotian
Jakub Kotian - 11.01.2020 17:22

Hello please can you help me with a problem in DIVI ?? I got a social icon for Facebook page.. and this (when hit) redirects my whole page in to that face book page ... IT DOES NOT open a new window ...thats my problem .. my other social icons work well.. they redirect to the instagram ..and so..but they re open in new windov :(

Ответить
Leon van Essen
Leon van Essen - 17.10.2019 22:22

Hi, I want to add it in a blurb as an icon. Is this also possible?

Ответить
veryfunny
veryfunny - 11.10.2019 15:52

Thank you for the great tutorial.

Ответить