Articles in this section

See more

Adding social icons to the navigation/menu

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

You can use this hack to add social media icons to your menu. We'll be using Font Awesome's icon library for our social icons.

You can view a working example here.

Adding the social icons to the menu

First, we'll need to add our social icons to the menu system. To do this, we'll go to Customize > Navigations, select your navigation bar and under the 'Menu' tab look for the 'Edit Menu Items' option.

Create three new menu items, with the link type set to 'Custom' for each. Set a title for each (you can use the name of the social media channel) and then set the URL to your social media URL. For this tutorial, I've created menu items for Facebook, Instagram and Twitter.

Adding the custom classes

Finally, we'll need to assign custom classes to each of your social icons. Once you've added all three menu items, select each menu item individually and under the Custom Class option add the following:

For Facebook: "social-icon social-icon-fb"
For Instagram: "social-icon social-icon-ig"
For Twitter: "social-icon social-icon-twitter"

custom-class-menu.jpg

Be sure to add the space between "social-icon" and the second classname.

Adding the custom CSS

To bring everything together and make the magic happen, we'll need to place the following CSS under Customize > Advanced > Custom CSS:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-brands-400.svg") format("svg"); 
}

.social-icon {pointer-events: initial !important; display: inline-block !important;}
.open-menu .social-icon {margin-top: 20px !important;}
.social-icon span {display: none !important;}
.social-icon a {padding: 0 0 !important; margin-left: 20px;}
.open-menu .social-icon a {margin-left: 0px; margin-right: 20px;}
.social-icon a:before {font-family: 'Font Awesome 5 Brands'; font-size: 18px; transition: ease 0.5s opacity;}
.social-icon-fb a:before {content: "\f39e"; }
.social-icon-ig a:before {content: "\f16d"; }
.social-icon-twitter a:before {content: "\f099"; }

/* Set Custom Color */
.social-icon a:before {color: #000 !important;}
/* Set Custom Hover Color */
.social-icon a:hover:before {color: #000 !important; opacity: 0.5;}
/* Set Custom Color on Overlay */
.open-menu .social-icon a:before {color: #000 !important;}

 

 Once the CSS is added, you will now have your social icons added to the menu system. Hurray!

Adding your own social channels

You may wish to set different social media channels, such as Behance or Dribbble. What you can do is follow the steps listed above, but assign custom classnames for each social channel.

You can then add in additional CSS for each added social channel. You can use the Font Awesome Cheatsheet to find the unicode number for each icon. Replace the 'content' value with the corresponding code. For example, if we wanted to use Behance we would add the following line of CSS:

.social-icon-behance a:before {content: "\f1b4"; }

 

Related articles