FontAwesome position on custom elements

Question

I have a custom element and the SASS looks like this:

.tile {    
    &.account-tile:before {
        font-family: FontAwesome;
        content: "\f003";
    }
}

.tile:before {
    color: rgba(255,255,255,0.5);
    font-size: 50px;
}

These tiles are different sizes. I would like to position the icon in the center of the tile, but I am not sure how I can do this effectively. Can someone give me a hand?

Update 1

I changed my SASS to this:

.tile {    
    &.account-tile:before {
        font-family: FontAwesome;
        content: "\f007";
    }
}

.tile:before {
    color: rgba(255,255,255,0.5);
    font-size: 100px;
    display: block;
    text-align: center;
    vertical-align: middle;
    background-color: pink;
    height: 100%;
}

but, although it centers horizontally, it does not center vertically.

Look up the "fw" element in the font-awesome css sheet, this should give you the fixed-width version that centers. - failing that adding margin:0 auto; will center an object — Dave Burns, Mar 31 '15 at 11:45
fa? not seen an element called "fw". And the margin you have set would only center horizonally. — r3plica, Mar 31 '15 at 12:07
Sorry I mean fa-fw, it sets the width to something like 1.8765432em if I remember correctly, you can see it on http://fortawesome.github.io/Font-Awesome/examples/ — Dave Burns, Mar 31 '15 at 13:28
Sorry just saw the margin:0 auto; bit, you can get the parent div to act like a table cell with CSS and then set the valign the middle, can't remember exactly how to do it but a quick google will help — Dave Burns, Mar 31 '15 at 13:29

score 0 · Answer 1 · answered Mar 31 '15 at 11:42

0

Since Font Awesome is a font, try text-align: center;

answered Mar 31 '15 at 11:42

Hkidd

872
10
25

FontAwesome position on custom elements

1 Answers1