Why Font-awesome icons are not correctly vertically centered?

2
votes

Please check this fiddle:

CSS:

div {
    background-color:lightgray;
    height: 50px;
    line-height: 50px;
    font-size: 19px;
}

HTML:

<div>
    <i class="fa fa-minus"></i>
</div>

and also include font-awesome in the resources:

https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

direct link: https://jsfiddle.net/xsok4r9n/

if you look carefully you'll see the minus icon is not properly centered vertically... this problem comes up with most of the font awesome icons (and even with some other sets I tried).

Why does this happen? Is there anything I can do to avoid it?

Thanks

1
font-awesome

1 Answers

0
votes

The issue is that the FontAwesome font itself is not centered vertically. You may want to compensate for this with margin or padding.

Here is an extreme example; https://jsfiddle.net/epq5gqwa/

div {
   background-color: yellow;
    font-size: 400px;
}
i { 
   background-color:lightgray;
}