Menu
What is the best way to decrease the size of a font awesome icon. There is a fa-3x, etc... to increase the size. Is there a class to decrease the size?
361
Select the SVG of font-awesome located in your extracted zip inside fonts. Repeat the procces uploading your own svg files. Inside Home (at the header of the page) Select the icons you want to download, customize them to give your custom names and select publish to have a link or download the fonts and css.
To use an icon, just add the name of the icon to the class of an HTML <i> element. To control the size of the icon, change the font-size property of the icon, or use the w3-size classes: w3-tiny. w3-small.
Setting a Consistent Icon Width Font Awesome icons are designed on grid and share a consistent height. But they vary in width depending on how wide or narrow each symbol is. If you prefer to work with icons that have a consistent width, adding fa-fw will render each icon using the same width.
Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size:
.fa {
font-size: 12px;
}
There are two Font Awesome classes to use if you need something simple: fa-xs and fa-sm.
The size equivalents are:
.75em
.875em
Sizing Icons | Font Awesome (more informations here)
33
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
