[Resolved] Font Awesome Stack

Home Forums Support Font Awesome Stack

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #115248
    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.

    #115253
    Adrian Cojocariu

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

    #115254
    Scott
    .services-icon {  
    color: #FFFFFF;
    }
    
    .icon-background {
        color: #004B88 !important;
    }
    #115298
    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.

    #116407
    Tom
    Lead Developer
    Lead Developer

    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>
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.