iheart pagelines

Tip of the week: Adding Social Icons To Any Menu.

Published on by | Add Comment

Greetings Everyone, In this weeks short tip I am going to show you how easy it is to add social icons to your WordPress menu. We all want to be found socially so what better place to display your social links that in the menu. There are two was to accomplish this the first is the single social and the other will allow you to have multiple social icons in one link.

So let's begin.

First Method: 

You should already have a menu created if not take some time and do that now.

For our social icons we will be using font awesome simply because we should all be familiar with it at this point. Now depending on which theme or framework you are using font awesome may or may not be included in it. If  your theme doesn't have it you can easily add it by following the Get Started guide.

Step 1:

Create a custom link menu item.

Step 2:

**Since  the 5.1 update fa-fa does not work and you should use pl-icon pl-icon-facebook instead.**

Find the icon you wish to use and add it to the navigation label.

iheart pagelinesStep 3: 

Add your url. and you are done.

Second Method:

This method works great if you would like to have multiple social networks in one menu link all with a different destination.

For this to work we are going to use some HTML and a little CSS.

Step 1:

Create a custom link.

Step 2:

Add this HTML to the navigation label box.

<ul class="social-list">
<li>
<a href="#" target="_blank">
<i class="pl-icon pl-icon-facebook" aria-hidden="true"></i>
</a>
</li>

<li>
<a href="#" target="_blank">
<i class="pl-icon pl-icon-instagram" aria-hidden="true"></i>
</a>
</li>

<li>
<a href="#" target="_blank">
<i class="pl-icon pl-icon-twitter" aria-hidden="true"></i>
</a>
</li>

<li>
<a href="#" target="_blank">
<i class="pl-icon pl-icon-google" aria-hidden="true"></i>
</a>
</li>

</ul>

Don't forget to add your link to your social networks.

Step 3:

Include this CSS in your style sheet or custom less plugin.

ul.social-list li {
list-style-type: none;
display: inline-block;
margin: 0px 24px 0px 0px;
padding: 0px;
}

And that's it.

If you really wanted to get fancy you could give each one a different color and unique hover state.

Also note that this will work in a embed section so you can put it pretty much anywhere.

Bonus:

If you would like something a little more fancy you can give this a try Simple Sharing Buttons.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

 

Leave a Reply

Your email address will not be published. Required fields are marked *


Sign-up for exclusive content. Be the first to hear about iHeart PageLines news.
Subscribe

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match