Vertically center the Font Awesome element

Question

I would like to vertically center font awesome element in a box (div). I almost do it, however icons are not precisely centered. Only the second one looks ok. I have added the red axis of symmetry to illustrate the differences. What is the issue and how can I fix it?

.icon-wrap a:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.icon-wrap a {
    display: inline-block;
    width: 110px;
    height: 110px;
    text-align: center;
    overflow: hidden;
    margin: 0px auto;
    border: 6px solid black;
    border-radius: 100%;
    text-decoration: none;
}
...

Here's my code working in a fiddle

the icons are not all even big, I added a line height and now only the last one is centered vertically jsfiddle.net/4rj99kk9/4 — arnoudhgz

Ardian Ardian · Accepted Answer · 2015-02-15T16:34:56

Actually, the plus-square-o icon seems to be built that way in Font Awesome. That's why 2 others are pretty well aligned and the first one is not.

If you hover on this icon in Font Awesome you can see it's not the same alignment as the one plus-square.

So, in this case you can either change the icon (to align each icon perfectly) or you can manipulate only on the first <div class="icon-wrap">.

Something, like this:

.icon-wrap:first-child .icon-holder {
    padding-top: 5px;
}

Here's an updated jsfiddle to that.

Vertically center the Font Awesome element

1 Answers