AppThemes Docs

Adding Social Media Icons to Your Footer Menu Using ClassiPress 4.x

Using ClassiPress 4.x you can add social media icons to your footer menu that link directly to your account. Adding social media links allow your visitors to easily access your Facebook, Twitter, Google Plus, Instagram and Linked in. The icons are not pages so using this documentation we will walk your through adding Custom Links to your footer menu.

Note: To add HTML to a navigation label you need to be ‘super admin’ of the WP site if it is a part of a network install. 

Adding Social Media Icons to the Footer Menu

The following instructions will assist you to add a Twitter account to your footer menu. You will need to add each account separately with their own URL and Navigation Label.

Step 1) In your WordPress dashboard click on Appearance and then on Menus.

Step 2) You will see a drop down titled Select a Menu to Edit. Choose the Footer menu from the drop down and click the Select button.

Step 3) Expand the Custom Links panel on the left hand side.

Step 4) Enter the URL of your social media account (e.g. https://twitter.com/).

Step 5) Enter the following Navigation Label 

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

Step 6) Click the Add to Menu button.

Step 7) Ensure you Save Menu before exiting.

Example: Adding Social Links to Footer

In the screenshot below, the Facebook social icon link has been added to the footer menu.

Other Social Media Icons

You will need to repeat all the steps above for each and every social media icon you wish to add.

Facebook:

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

Google Plus:

https://plus.google.com/

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

Instagram:

https://www.instagram.com/

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

Linked In:

https://www.linkedin.com/

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

The Display of Social Icon Links

If you have followed the instructions above your Social Icons will appear in your sites footer menu. This is displayed in the example below.

Your rating: none
Rating: 0 - 0 votes