How to Add Social Icons to Divi’s Primary Menu

Posted on June 26, 2017 by in Divi Resources | 45 comments

How to Add Social Icons to Divi’s Primary Menu

In today’s Divi tutorial, we’re going to show you how to add social icons to the primary menu of your Divi website. By following this tutorial step by step, you’ll be able to add social icons to any website you create–whether it is for yourself or a client.

We already have the ability to add social icons directly into the header and footer of a website with the Divi theme customizer. But if that’s not what you’re looking for, this tutorial might help you out because in many cases; people prefer having the social icons in their primary menu instead of the header or footer of their website.

We’ll show you exactly how you can add them, how you can customize them and how to open them into a new tab. These are all the things you really need to know so that the social icons in your primary menu can bring added value to your whole website.

Why Add Social Icons to The Primary Menu?

Websites and social media channels are in a lot of cases complementary. Not all the content that’s being shared on a website appears on the social media channels and vice versa. That’s why promoting your website on your social media channels and your social media channels on your website are not uncommon and frankly; highly encouraged.

You want people to interact with your company or brand in the way they’re most familiar with. Your website is usually ‘unknown territory‘ for them. The barrier of contacting you directly through your website might therefore be bigger than for social media channels. Most people who visit your Facebook page or Twitter page are already integrated into the platforms and the comfortable feeling can influence their behavior positively.

That’s why, in overall, putting socials icons on your website is very recommendable. But why share them explicitly in your primary menu? We’ve listed two of the main reasons.

Easy To Find/Menu Follows Visitor During Their Visit

When you’re adding social icons to your website, you want them to be as visible as possible. People should not have to put in effort to find the social icons on your website. That’s where putting the social icons in the primary menu can make the difference. The primary menu follows a person throughout their whole stay on your website. There’s no need to go looking the icons, the icons come to you. The only thing the person has to do is click and they’ll get there.

The primary menu follows a person throughout their whole stay on your website. There’s no need to go looking for the icons, the icons come to you. The only thing a visitor has to do is click on them and they’ll get there.

Triggering Action

As mentioned before; social media channels and the websites are complementary. They work together and usually have the same goals such as informing potential leads and attracting them to the services or products that are being offered. The more they’re confronted with them, the more likely their curiosity will get triggered

To support the connection between the website and social media channels, it’s a good thing to confront the visitors with the social icons as often as possible. The more they’re faced with them, the more likely their curiosity will get triggered and the more likely they’ll eventually click on them.

How to Add Social Icons to Divi’s Primary Menu

Subscribe To Our Youtube Channel

Install Font Awesome

First of all, we need to install Font Awesome into our WordPress website. We’re going to do this by adding some CSS code into the Theme Options of Divi.

Open your WordPress website, go to Divi > Theme Options > Navigation and paste the following code in the <head> section:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Font awesome should now be added to the fonts that are being used on your website. You can now add these icons to your primary menu by following the next part of our post step by step.

Start Creating Primary Menu

Most probably, you’ve already created your own customized primary menu where you have listed all the pages you want to appear in the primary menu of your website. If you haven’t done that yet, go to the ‘Menus’ page within Appearance and create a new menu.

Next, name the menu, add the pages you’d like to appear in your primary menu and select the ‘Primary Menu’ option below.

Add Social Icons

Moving on, we want to add the social icons. When creating the primary menu, you can choose where you want your social icons to show up. In most cases, they’ll come right after the pages, but you can put them first as well. There are social media icons available for all the important and most popular websites out there; from Facebook to Twitter, Instagram, LinkedIn and more.

Start by opening the following link on the Font Awesome website. We’ll need this website for the next part of this post where we’ll be adding the icons manually.

Add Icons Manually

The same way of working applies for each social icon that you add to your primary menu. As an example, we’ll show you how to add the Instagram icon. For all the other icons you’d like to add as well; know that it’s the same way of working (only the icon, HTML code and URL differ accordingly).

Open the ‘Custom Links’ option and you’ll see two fields appear: URL and Navigation Label. Obviously, the URL field is where you type down the URL that leads a visitor to one of the social media channels. In this example, we want to the icon to lead to Instagram, so just type down your Instagram URL.

Next, go to the Font Awesome website in your browser and look for the Instagram icon through the search bar. Likewise, you can search for the Facebook, LinkedIn and any other icon.

Once you’ve clicked on the Instagram icon, you’ll see that the website provides the following HTML code:

<i class="fa fa-instagram" aria-hidden="true"></i>

This is the exact code we need to use in the Navigation Label field, so go ahead and complete the custom link by copying and pasting the code into the field.

Repeat the same process for each one of the social icons you want to appear in your primary menu and take a look at how it looks like on the front end of your website.

Change Appearance of The Social Icons

Collective Changes to the Primary Menu (Including Social Icons)

The Theme Customizer allows you to make all the appearance changes you’d like to make to your primary menu in one place.

The changes that you can make to the primary menu with the Divi options apply to the social icons as well. When you’re giving a certain color to your primary menu, for instance, the social icons will have the same color. That’s because we’re using a font instead of an image to make this work.

You can make all these changes you want to make to the appearance in the Theme Customizer by going to Header & Navigation > Primary Menu Bar. The changes that you make apply in real-time and give you a good perspective on how you want your primary menu to look like.

Open Social Icons in New Tab

This part of the post is something extra you can do with the social icons. You probably don’t want to send your visitors away from the website, even though they’re going to your social media channels. You want to keep both interactions alive for as long as possible by opening the social media links into a new tab everytime someone clicks on them.

We can easily make the ‘Open in New Tab’ option work on all the social media icons by going back to the menu we’ve created before. We need to make all the adjustments manually to each one of the icons. In this example, we’re going to make the changes to the Instagram icon.

Go ahead and delete the URL you’ve provided in the URL field and paste the following code into the navigation URL instead:

<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

Do the same thing for each one of the icons if you want them to open in a new tab. Each time a visitor clicks on them, they will open in a new tab which allows you to keep your visitors around as long as possible.

Final Thoughts

This tutorial will surely help you integrate social icons into your own Divi website in the way you want. You can customize them and make them fit with the rest of your primary menu. If you have any questions or suggestions; make sure you leave a comment in the comment section below. We’ll stay in touch and try to answer all the questions or suggestions you have.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image via Oceans / shutterstock.com

Premade Layouts

Check Out These Related Posts

45 Comments

  1. I was thinking of how to easily accomplish this just last week, this article just made my life a lot easier. Divi to the rescue again.

  2. I just use the excellent and free Menu Icons plugin.

    • The downside to this is that you are loading another plugin, using more resources. Using the method above would take a little less page load time.

  3. Hello, nice article.
    You made a little mistake, you wrote a piece of text twice.

    “The primary menu follows a person throughout their whole stay on your website. There’s no need to go looking for the icons, the icons come to you. The only thing a visitor has to do is click on them and they’ll get there.”

    – this part is duplicated 😉

  4. Very easy and simple

  5. Nice article.

    Explained quite beautifully.

    Thanks

  6. I will file this until I’m ready to use it next time.
    But a note on presentation.
    I would TRULY appreciate starting off a blog like this with a screen shot of what the icons look lie insitu. That is, what is it I’m creating? While we spend tons of time on how to do this in the background, we never see a final product.

    I think that would be extremely helpful.

    Thanks.

    • You took the words right out of my mouth. Thank you.

      • Same for me. This would be very helpfull.

    • I will definitely take you up on the advice for future posts 🙂

      • I agree, I kept scrolling looking for the demo. This sounds like a fantastic feature but I want to see a page with the finished product (functional) first before I decide to implement.

        • I just have to ask, have you guys never heard of a Dev Server or Staging Environment? If you know what Font Awesome looks like and you know how the menu system works, there isn’t really a need for a picture to show you because you can create anything that you want if you know what you’re doing. She simply laid the grounds for you to create. True designers don’t need pictures to point them to the end product. They create their own ideas. You can’t learn something new if you don’t try it out.

    • Ditto

    • Me too!!

  7. You may want to make a quick change from Navigation to Integration above Step 1.

    Open your WordPress website, go to Divi > Theme Options > Navigation and paste the following code in the section:

    Open your WordPress website, go to Divi > Theme Options > Integration and paste the following code in the section:

  8. Thank you for the tip. This will become very handy! 🙂

  9. I agree with Randy above. A screenshot of what you’re about to accomplish would be huge!

  10. It´s a great article. But now it is using the Elegant Icons font and the Font Awesome. Isn´t it?

  11. Very useful article. FontAwesome now also have their own CDN which allows you to have a specific link per site and also easily control the versions, will come in handy when version 5.0 is released.

  12. Great information to use. Do you have additional info on how to do the same thing but in the secondary menu?

    • I can be implemented in the same way, just tick the secondary menu below in the menu settings..

  13. I can use this for sure!

    What I could us even more is how to add Search to a menu. Any chance of getting a tutorial on that?

    • You could use the plugin ‘shortcodes in menus’.

      Then use a search plugin that provides a shortcode (AWS for ecommerce) and copy the shortcode into the menu. Done.

  14. I still can’t see an example… is there an example somewhere we could see?

  15. Dear Donjete, thank you for the great article!

    I have a question, connected to the social media brand assets, being problem for lots of webdesigner:
    – How is it possible to keep them correct, when all icons take the color of the primary menu?
    – What is your opinion on this?

    https://en.facebookbrand.com/guidelines/brand
    “Don’t modify the “f” Logo in any way, such as by changing
    the design, scale or color. If you can’t use the correct color
    due to technical limitations, use black and white. ”

    Thank you, Irina

  16. I frankly don’t think this is the best implementation. Divi already comes equipped with an icon font and it features most of the social networks (e.g. instagram).
    So there really is no need to add font-awesome to the website if that’s all you’re trying to do (there are of course a lot of other excellent icons in font-awesome and if you need any of those, it’s a different story, but “just” for some social media icons, I would not recommend adding font-awesome to the site).

    I would add a custom class to the respective link in the menu and then in the CSS, I would specify that this particular link should use the font “Etmodules”. You can get the correct character by using a blurb module, working with an icon and inspect the respective element (e.g. the facebook symbol) and copy / paste the character into your menu.

    • Totally agree with you.

    • I would love the official Instagram and Facebook icons in colour instead of these font-awesome ones. Do you know how I can do that or where I can read how to do it? I would need a tutorial 😉

  17. Thanks, (faleminderit) Donjete….

  18. Great tutorial! Thanks a lot 🙂

    My question, how do you reduce the space between icons?

  19. Wow this is great Thanks for great tips make easy for me Thanks

  20. 1) why doesn’t divi just add more social media icons (I use menu icons plugin only because I need LinkedIn which divi refuses to add)

    2) to open links, pages, etc. in new tab,
    Appearance – menu – screen options at top corner of page – check target. You will now have option for each item in your menu to open in new tab

  21. I’m having issues implementing this. I followed the steps and added this to my primary menu but it keeps auto changing the code to and the icon isn’t showing up on my main page.

    • I had the same problem and strangely helped to NOT ADD code to the HEAD section ….

    • I still have no idea why icons work without linking Font Awesome ….

  22. Thank you! Did this tonight and all went well.

  23. Thanks for this! Just implemented on a new site today. Question: How can I get these menu items to show up next to each other on a vertical navigation? right now, they are spaced out a lot on top of each other. I only have 2 (Facebook and Mail).

    • I would like to know this too. I’ve just added Twitter, Facebook and Google+ and they are showing on top of each other. Ideally I would like them to show next to each other.

      • I have the same problem. I would like to know the solution. Thanks.

    • +1 Upvote – would like to know how to resize space between

  24. I just used an image…same instructions on creating the menu, adding a custom link, but then uploaded my social media icon image and put in the necessary html. FYI the html can easily be gathered by creating a new page, adding the image, clicking TEXT and copying the html, delete the page and use the copied html to post in the custom menu.

    Corey

  25. After applying the “new tab” step, the menu displays the logo and search icon horizontally misaligned

Join To Download Today

Pin It on Pinterest