Categories

Featured templates

JS Animated. How to manage social icons

Celine Jade August 4, 2015
Rating: 5.0/5. From 1 vote.
Please wait...

This guide will walk you through how to add social media buttons to your sidebar or footer in Website Templates.

JS Animated. How to manage social icons

If you want to add more social icons, you can do this in a few simple steps. In our case, let’s add the fourth button, let it be Linkedin.

  1. First, search for the element in order to find out its class by using Firebug tool that can be enabled with the right click on the screen and selecting Inspect Element from the drop down menu:

    how to manage social icons.1
  2. Then log into your cPanel, look for File Manager where the site content is stored.

  3. In order to add a new social share icon, you need to open an appropriate .html file. You can see file name in the browser bar. In our case we need index.html:

    how to manage social icons.2
  4. Search for the footer area and copy a piece of html code used for Facebook, as an example, then paste it above or below the list. Replace the title Facebook with Linkedin:

    how to manage social icons.3
  5. The last step is changing Fontawesome icon, used for Facebook. Open the following link: The complete Font Awesome icon reference. There you can see the list of all icons and their classes. We need to copy the class name of the icon we are interested in and paste it instead of Facebook class. It will be fa-linkedin for us:

  6. Replace fa-facebook with fa-linkedin. In the same way you may easily replace a default # sign with any URL you need; save changes and refresh your website:

    how to manage social icons.4

Please remember that you have to repeat the same actions for each index.html file available (index-1.html, index-5.html, etc.).

Feel free to check the detailed video tutorial below:

JS Animated. How to manage social icons
This entry was posted in JS Animated tutorials and tagged HTML, icon, social. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket