A recently asked question on the Studio Press forum was:
How do I add social media icons to the main navigation menu?
While there are a number of ways to do this by adding code to a theme's functions.php file, the method described in this article may prove to be just a little bit easier for the non-coder. It uses the popular Font Awesome iconic font and CSS toolkit, a little bit of CSS, and a few custom menu items.
Social Media Icons & Font Awesome
As a CSS Toolkit, Font Awesome gives you 605 scalable vector icons in one font that can easily be customized—i.e., size, color, drop shadow, or anything that can be done to text with the power of CSS. For a WordPress powered site, setting up Font Awesome can be as simple as adding one line of code to your theme's functions.php file. On this website Font Awesome is installed with the following line of code:
The only drawback to this method is that when there is a new Font Awesome release, you have to manually update your functions.php file to change the version number. An easier method for installing Font Awesome on your site is to install the Better Font Awesome plugin, which allows you to automatically integrate the latest available version of Font Awesome into your WordPress project, along with accompanying CSS, shortcodes, and TinyMCE icon shortcode generator. Using this plugin, your Font Awesome installation will always remain up to date.
If you don't know how to install a plugin in WordPress, please register for our free WordPress Video Training and watch Part 20—Plugins.
Create a Custom Menu Item
Now that you have Font Awesome installed. Let's create a custom menu item. Navigate to the Appearance/Menus page and select your primary navigation menu. From your selections on the left, choose Custom Links, fill in the values for URL and Link Text, and then click the Add to Menu button.
Once the custom link is added to the menu, edit it so it appears similar to the image below.
Custom Menu Item Content
Add your custom values to make the custom link appear similar to the image on the left, which demonstrates adding a Facebook icon.
- URL: Link to your social media page
- Navigation Label: <i class="fa fa-facebook"></i><span class="fa-hidden">Facebook</span>
- CSS Classes: right social-icon
- Notice the "fa-hidden" class in the span surrounding the text
- The CSS Classes field may not be visible to you. If it is not visible, click on the screen options button at the upper right of your screen and make sure CSS Classes is checked in the "Show advanced menu properties" section.
The CSS
The CSS below is from the Sunshine State Skinny website. The .fa-hidden class moves the menu text off of the page, leaving just the Font Awesome icon visible. You may have to adjust the color, padding, and size to match your theme. This code produces icons that are white against the menu's black background.
The Result
If everything goes as expected, you should receive results similar to the Sunshine State Skinny menu below:
Excellent tutorial! This is really helpful to use in my business. Great work.
Thanks.