Font Awesome

Sparkling
1

Hi, I tried to insert Font Awesome stack icons, however it does not display as intended.

You may find the output at http://itistime.asia/hello-world/

Thanks

2

It is not problem with this theme as none of the themes will work with Font Awesome icons in the way you have used them.

Stack icons are really tricky and WordPress makes it worse by adding </br> tags everywhere. You can see that in your website source around Font Awesome icons used in a stack. To avoid it you should make less readable code without spaces like this:

<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<br>
<span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag fa-stack-1x fa-inverse"></i></span>fa-flag on fa-circle<br>
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span>fa-terminal on fa-square<br>
<span class="fa-stack fa-lg"><i class="fa fa-camera fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x text-danger"></i></span>fa-ban on fa-camera

That way WordPress won’t add unnecessary break in between lines.

3

WOW! it works like charm!

To further explain, my previous code is

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

however if I make the code inline to:
<span class="fa-stack fa-2x"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-location-arrow fa-stack-1x"></i></span>
The stack icon display correctly.

Thanks!

4

Hi, this would be better and less confusion if you amend this in your theme documentation if you do not mind.

Thanks