[Resolved] Font Awesome Stack

[Scott]

I am trying to get font awesome icons stacked on one my pages. I am using this code:

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fa-home fa-stack-1x services-icon"></i>
</span>

which works fine in the sidebar. However when added to a page the home icon is displayed outside and below the circle.

[Adrian Cojocariu]

Mind if we could also see the CSS to the classes ?

[Scott]

.services-icon {  
color: #FFFFFF;
}

.icon-background {
    color: #004B88 !important;
}

[Adrian Cojocariu]

That is strange… everything should work just fine.

In the page, have you added the code into the text section ? Maybe the code just got messed up by the visual editor. Some elements like ” > and & often get changed to other code.

Could you also post a screen shot of what it looks like ?

I’m usually getting the wrong effects if I don’t specify the sizes correctly, but your code looks just fine.

[Tom]

WordPress doesn’t like empty tags for some reason.

Try this:

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x icon-background"><!-- icon --></i>
  <i class="fa fa-home fa-stack-1x services-icon"><!-- icon --></i>
</span>

[Author]

Posts