Menu
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.
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 ?
715
Font Awesome's icons are designed to render crisply at the equivalent of 16px . While we provide utilities to decrease their size, it's industry and our best practice to avoid rendering important UI symbols at very small sizes as they are tougher to read and understand.
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes. If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Set the font-family to Font Awesome 5 Duotone , the font-weight to 900 , and add positioning styles for the pseudo-element.
The most preferred way to center Font Awesome Icons is to assign a center class to each <i> tag. Setting width to 100%, let's each icon cover 100% area horizontally. Also text-align then centers the icon accordingly to the width being used.
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.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
