Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Centre Aligning Font Awesome

Home Forums Support Centre Aligning Font Awesome

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #386560
    Rylan Urban

    Hi, no matter what I try – i can’t seem to get the icon center aligned within the column.

    Here is using div, p, a, span (i doesn’t work either).

    http://jbe.allgreenmarketing.com/#home

    What to do!

    #386567
    David
    Staff
    Customer Support

    Use the style: display: inline-block;

    #386577
    Rylan Urban

    What’s the actual html?

    none of these are working:
    <span style="text-align: center;" style="display: inline-block;" class="fa fa-pencil" aria-hidden="true"></span>
    <span style="display: inline-block;" class="fa fa-pencil" aria-hidden="true"></span>
    <span style="text-align: center;" class="fa fa-pencil" aria-hidden="true"></span>

    #386653
    Rylan Urban

    Any help would be great – tried everything!

    #386654
    David
    Staff
    Customer Support

    I would add this inside of the grid container.

    <div style="display: inline-block; text-align: center;">
        <i class="fa fa-pencil" aria-hidden="true"></i>
        <p>Here is a line of text</p>
        <p>Here is a line of text</p>
    </div>
    #386664
    Rylan Urban

    That one worked! But only if you ALSO wrap it in a p style…

    Here is the only code that would align icon center:

    <p style="text-align: center;"><span style="text-align: center; display: inline-block;" class="fa fa-pencil" aria-hidden="true"></span></p>

    #386673
    David
    Staff
    Customer Support

    Glad to hear you found a solution. I would however suggest you try pasting the code i gave you into one of your grid columns – every element contained within the div will then be centered and will occupy its own line. This saves you applying code to each element.
    Also align-center on span is not a done thing, it does work, but you won’t see it as a span only takes up as much space as it’s content, so currently your code is relying on the <p> tag to center the font icon.

    Further to thi it would be best to read up on HTML and CSS. Wherever possible you should limit the use of inline styling (placing CSS inside the HTML).

    #386689
    Tom
    Lead Developer
    Lead Developer

    That’s a lot of text-align: center styles 🙂

    The icons are inline elements, so if they’re wrapped in a block or inline-block element which is set to text-align: center, they will be centered.

    For example:

    <div style="text-align: center">
       Every inline element inside here is centered.
    </div>
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.