Font-Awesome in WordPress – Icons not stacking correctly

1 Views

I am using Font-Awesome in a WordPress site have included the Font-Awesome CDN in my functions.php file according to this bit of php.

I can insert the icons into my site but am unable to get icons to stack according to this example code:

Read More
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o

You can see the output of this code here.

Does anyone have any thoughts on why this may not be working? I’m pretty sure that there are no CSS class clashes…

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Doing view source on your page:

    <span class="fa-stack fa-lg"><br />
  <i class="fa fa-square-o fa-stack-2x"></i><br />
  <i class="fa fa-twitter fa-stack-1x"></i><br />
</span>

    The <br /> elements are breaking Font Awesome’s CSS. I imagine WordPress is putting those in automatically for you, so try putting everything on one line so WordPress doesn’t try to add any <br /> elements into the code:

    <span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span>