Social icons are not displaying/linking correctly

There can be numerous different reasons why your icons are not displaying or linking correctly. We'll explore them all below:

My icons are displaying vertically

There are three possible reasons your icons can display vertically. These are listed in order of what's most common:

  • If your site is running Wordpress 4.8 or later, you may be affected by the new Text Widget changes. You'll need to switch your icons to a Custom HTML widget. Click Here for explanation and instructions.
  • If your Wordpress theme has icons in a top navigation bar, be sure in your social icons code in the Nav Social Icons widget area, the first line is <div class="nav-social-icons"> per the instructions. If not, they will display vertically.
  • We have seen a handful of times customers putting each individual icon in their own separate widget. This is incorrect; the entire social icons code should be in ONE Custom HTML widget.

My icons are missing altogether or appear as boxes

In your Wordpress dashboard, go to Plugins > Installed Plugins. See if you have a social icons plugin installed, such as Simple Social Icons or a similar plugin. These plugins can "override" the icons included in our themes and cause them to not display. If you are using a social icons plugin, remove it.

My icons lead to an error page

If your icons are leading to an error page on your site, there are two possible reasons. 

  1. The URLs to your social profiles are missing http://. A correct link looks like this: http://facebook.com/myprofile or https://facebook.com/myprofile
  2. The quotation marks around your links are corrupted. If this the case, grab the clean social icons code at the bottom of this page and add your links again.

My icons are not spaced correctly

Every one of our Wordpress themes uses the same code for the social icons. Here is the CORRECT code that will not have any spacing issues:

<div align="center">

<a href="YOUR FACEBOOK LINK" title="Facebook" target="_blank">
<span class="social"><i class="icon-facebook"></i></span></a>

<a href="YOUR TWITTER LINK" title="Twitter" target="_blank">
<span class="social"><i class="icon-twitter"></i></span></a>

<a href="YOUR PINTEREST LINK" title="Pinterest" target="_blank">
<span class="social"><i class="icon-pinterest"></i></span></a>

<a href="YOUR INSTAGRAM LINK" title="Instagram" target="_blank">
<span class="social"><i class="icon-instagram"></i></span></a>

<a href="YOUR TUMBLR LINK" title="Tumblr" target="_blank">
<span class="social"><i class="icon-tumblr"></i></span></a>

<a href="YOUR BLOGLOVIN LINK" title="Bloglovin" target="_blank">
<span class="social"><i class="icon-heart"></i></span></a>

<a href="YOUR RSS LINK" title="RSS" target="_blank">
<span class="social"><i class="icon-rss"></i></span></a>

<a href="YOUR GOOGLE+ LINK" title="Google Plus" target="_blank">
<span class="social"><i class="icon-gplus"></i></span></a>

<a href="YOUR YOUTUBE LINK" title="Youtube" target="_blank">
<span class="social"><i class="icon-youtube"></i></span></a>

<a href="mailto:YOUR EMAIL ADDRESS" title="Email Me" target="_blank">
<span class="social"><i class="icon-email"></i></span></a>

</div>

You can remove any of the icons that you do not want to use.