How to manage social icons

Let’s pretend you have an HTML theme setup on your site, but within the social links, there is no Linkedin one. Of course, you will ask yourself, “how can I manage it and have one more social link?”. In this case, it is time to learn and try the tips below. We are more than happy to present you the easy and quick way to perform this needed changes!

First of all, we should find out the way icons are added and what are their CSS classes. It is the point we will start at.

1. Please, open your website page with social links and place the cursor on the existing social icon, click on it with the right mouse button and select Inspect Element from the drop-down menu.
2. Access your website files.
3. Check, please, the name of the appropriate.html file in order to open it and use the existing code. Please, note, that you can see file title in the browser address bar. If you have the social icons on Home page in the footer, then open the index.html file with a text editor.
4. At the moment, we see the index.html file opened with the text editor. Since our example social icons are located in the footer, we are scrolling down to the very footer to see the Follow Us section. Here are the codes that show the social icons:

   Select and copy a piece of HTML code used for Facebook, as a sample, then paste it above or below the list of the existing social icons codes. The truth is that one exact example is worth a thousand words to read. So, for your convenience we are showing the complete code to be duplicated:

   Please, open this link: http://fontawesome.io/icons/ to see the complete Font Awesome icon reference list and their classes. All we need to do is to select the appropriate icon, e.g., Linkedin. Once this icon page is opened, copy the class name of the icon and paste it instead of Facebook class into the newly duplicated code. It is going to be “fa-linkedin” in our case, so, go ahead and replace fa-facebook with fa-linkedin. The code for the new icon will be the following:
5. We are almost done now, there is one more thing to complete the challenge. The default # sign should be replaced with any URL required. Pay attention to the sample below to do it correctly:
6. It is time to save changes and refresh the website. Generally, you should see the Follow up section with one more social icon code and in our case it looks like this now:

We hope this article helped you to learn how to manage social icons in your Multipurpose Website template.

Your attention is highly appreciated! Stay tuned for our pieces of advice to best suit your preferences in the process of the theme customization.