- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
JS Animated. How to manage social icons
August 4, 2015
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 iconsIf 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.
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:
Then log into your cPanel, look for File Manager where the site content is stored.
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:
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:
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:
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:
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