Social Icons

Your responsive template can include icons & links to social media sites like Facebook & Twitter. To change the links on your template, go to Content > Manage Topics in the admin console and edit topic: 0-template-header-social, or 0-template-social (the name of the topic will vary depending on your template). Click the <> HTML button to open up the HTML view.

You'll see code that looks a bit like this:

<div class="social-links">
<div class="header-social-icons">
<a target="_blank" href="//www.facebook.com/#"><em class="icon fa fa-facebook"></em></a>
<a target="_blank" href="//www.twitter.com/#"><em class="icon fa fa-twitter"></em></a>
<a target="_blank" href="//www.instagram.com/#"><em class="icon fa fa-instagram"></em></a>
</div>
</div>

If you want to change the URL for any of your social media icon links, you would change everything in the quotation marks after the href= tag to the new URL. In the code example below, the area you need to edit to change the URL is in red.

<div class="social-links">
<div class="header-social-icons">
<a target="_blank" href="//www.facebook.com/yourinformation"><em class="icon fa fa-facebook"></em></a>
<a target="_blank" href="//www.twitter.com/yourinformation"><em class="icon fa fa-twitter"></em></a>
<a target="_blank" href="//www.instagram.com/yourinformation"><em class="icon fa fa-instagram"></em></a>
</div>
</div>

For example: href="//www.facebook.com/yourinformation" would be changed to href="//www.facebook.com/my-website." You can see this has been done in the code sample above. It's important to leave the two forward slashes before the URL. The slashes tell your site software that this is a link to an external site. Without them, the links would not function properly.

Adding Social Media Icons

If you want to add in a social icon that isn't included in the skin already, copy one of the existing lines of code and paste it directly underneath the last line of code. Once that's done, you'll need to change the information needed for the link and what icon to display. In the code sample below, we've copied the line of code for an instagram logo and highlighted the areas that will need to be changed in red:

<div class="social-links">
<div class="header-social-icons">
<a target="_blank" href="//www.facebook.com/yourinformation"><em class="icon fa fa-facebook"></em></a>
<a target="_blank" href="//www.twitter.com/yourinformation"><em class="icon fa fa-twitter"></em></a>
<a target="_blank" href="//www.instagram.com/yourinformation"><em class="icon fa fa-instagram"></em></a>
<a target="_blank" href="//www.instagram.com/yourinformation"><em class="icon fa fa-instagram"></em></a>
</div>
</div>

You'll see above that it says "fa-instagram" in red on the newly added line. This is what's called a Font Awesome icon code. Font Awesome gives you scalable vector icons that can instantly be customized, and is built into version 10 by default. In the example above, you'll need to replace the "fa-instagram" in red with the Font Awesome Icon Code that you want to use (we've included the icon codes for the most common social media sites near the bottom of this article). It's important to leave the "icon fa" that is in quotations with the Font Awesome icon code. Version 10 CSS is set up to use that information as the identifier for the styling of the icons. Below is an example of what it would look like to add Pinterest to the social media icons, code changes are highlighted in red:

<div class="social-links">
<div class="header-social-icons">
<a target="_blank" href="//www.facebook.com/yourinformation"><em class="icon fa fa-facebook"></em></a>
<a target="_blank" href="//www.twitter.com/yourinformation"><em class="icon fa fa-twitter"></em></a>
<a target="_blank" href="//www.instagram.com/yourinformation"><em class="icon fa fa-instagram"></em></a>
<a target="_blank" href="//www.pinterest.com/yourinformation"><em class="icon fa fa-pinterest"></em></a>
</div>
</div>

Here are the most common social media sites and their Font Awesome icon codes:

If the above table doesn't have the site you'd like the icon for, visit this link: Font Awesome Icon List. That link will take you to the "Brands" section of Font Awesome's icon list. There is a search bar at the top of the page if you are unable to find the icon you want in that list. Once you have the icon you want, click into it. Here, you will see several different sizes of the icon. Just beneath these examples will be a name that starts with "fa-" this is the Font Awesome Icon Code.

Removing Social Media Icons

If you want to remove a social media icon, you just need to remove the line of code for the icon you want to remove. In the example below, all of the icons have been removed except for Facebook:

<div class="social-links">
<div class="header-social-icons">
<a target="_blank" href="//www.facebook.com/yourinformation"><em class="icon fa fa-facebook"></em></a>
</div>
</div>