Archived topic
Font Awesome Stack
4 replies · Started by Scott on June 17, 2015
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.
Mind if we could also see the CSS to the classes ?
.services-icon {
color: #FFFFFF;
}
.icon-background {
color: #004B88 !important;
}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.
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>