We have a number of options for sizing icons in your project. So much so, even Goldilocks would be happy.
We’ll cover the basics of industry standard sizing recommendations, and how you can size icons up when it’s useful, or when text alignment is not a concern.
By default, icons inherit the
font-size of their parent container which allow them to match any text you might use with them. In addition to that, Font Awesome comes with the following sizing tools.
Font Awesome includes a range of t-shirt based sizes that not only increase or decrease an icon's size, but also help vertically align an icon with surrounding text and elements (e.g. button padding). This is great for increasing/decreasing an icon's size while maintaining legibility and alignment alongside UI elements.
Like Font Awesome's icons, the relative sizing scale is created with modern browsers' default 16px
font-size in mind and creates steps up/down from there.
|Relative Sizing Class ||Font Size ||Equivalent in Pixels|
Font Awesome also includes a literal size scale to make increasing an icon's size from
10x easy and efficient. Literal sizing is useful for sizing icons at a larger scale or in cases where text alignment isn't a primary concern.
When text alignment and sizing icons is important to your design, you’ve got options for that, too.
|Literal Sizing Class ||Font Size|
Advanced Sizing Customization
If you're using our Sass or Less CSS pre-processor options, you can tweak both the relative and literal sizing scales to your liking via scale-based variables and mixins.