Menu
I'm trying desperately to get my magnifying glass font to render it larger. The code below works fine in firefox but not in Chrome or IE9.
What am I missing?
.icon-larger
{
font-size:50px;
}
<div class="search-icon"><i class="icon-search icon-larger"></i></div>
thanks!
437
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.
Setting a Consistent Icon Width If you prefer to work with icons that have a consistent width, adding fa-fw will render each icon using the same width.
Change fa-weight icon size To increase fa-weight font awesome icon size, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class fa-weight. Increase in icon size will be relative to their parent container.
If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.
The Font Awesome icon is hooked to the :after pseudo element, so your CSS would need to be
.icon-larger:before
{
font-size: 50px;
}
I have created a reference page of all the CSS content values for Font Awesome, along with a CSS snippet which shows how to use the icons with any element: http://astronautweb.co/snippet/font-awesome/
175
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
