2

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

emanuele
  • 193
  • 1
  • 10

1 Answers1

0

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;
}
Darren S
  • 920
  • 5
  • 15
  • Hi Darren, this really shows the problem well... but how do I know how much to compensate? Also this seems a common problem with font icons... it's a shame there's this issue, otherwise font icons would be great. Thanks :) – emanuele Nov 10 '15 at 01:15
  • Vector based font icons are awesome, don't give up on them. Through trial and error, you will need to manually compensate with margin-top or margin-bottom to get them positioned where you want them. – Darren S Nov 10 '15 at 01:22