9

I created a font icons set with FontAwesome icons and free icomoon icons set with Icomoon app . The default baseline in the app is 6.25% .

When I compare default FontAwesome icons and FontAwesome icons from icomoon app they are off by few px. In the image below , the button on the left is using default FontAwesome font , the button on the right is using same font icon created with icomoon app.

enter image description here

You can see that the icon in the button on the right is up by 2px or so.

Their CSS is almost same and using FontAwesome CSS does not change the fact that baseline is off and I don't want to adjust this via CSS

icomoon

font-family: 'Myicons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

FontAwesome 

font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing:

Do you know what baseline is FontAwesome using ?

Benn
  • 4,840
  • 8
  • 65
  • 106

1 Answers1

15

FontAwesome uses a baseline height of about 14% (of the em height). You can find that out for yourself by looking at the code of the SVG font provided by FontAwesome.

Keyamoon
  • 1,785
  • 17
  • 16
  • naild it mr icomoon. thnx. Do you think I would have issues with 14% and other icon fonts or they will all fall on same baseline as FA ? – Benn Sep 25 '15 at 12:03
  • thnx about svg info but can you be precise where to look ? https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/fonts/fontawesome-webfont.svg I never bothered before so it would be great to find that out for the future. – Benn Sep 25 '15 at 12:04
  • 1
    A font can only have one baseline. So yes, they will all have the same baseline. When you change the baseline in the IcoMoon app, the live font preview (in the font tab) gets updated so that you can see how they align next to some text with the same font-size. – Keyamoon Sep 25 '15 at 13:51
  • 4
    In the SVG font, look for "descent" and divide it by "units-per-em". Multiply by 100 to get the percentage. – Keyamoon Sep 25 '15 at 13:52
  • THANKS! this is what to configure in ICOMOON preferences to work with both: font-awesome and icomoon. Now my icomoon icons align the same as all other bootstrap texts and font awesome icons (Y) – Ruwen May 09 '17 at 12:01
  • 1
    The precise value is `14.28571428571429%` (100% * 256 / 1792). Also, Font Awesome's 4 font has been moved to here: https://raw.githubusercontent.com/FortAwesome/Font-Awesome/fa-4/fonts/fontawesome-webfont.svg – Rudey Jun 03 '19 at 17:21
  • For the other two values, if you use Em Square Height (power of 2): 1024, and Whitespace Width (% Em): 25 , it is almost exact compared to native FontAwesome 4.7. – RemBem Mar 31 '21 at 15:36