Is it possible to make Font Awesome icons larger than 'fa-5x'?
Font awesome is just a font so you can use the font size attribute in your CSS to change the size of the icon.
So you can just add a class to the icon like this:
.big-icon {
font-size: 32px;
}
Alternatively you can edit the source and create your own incrementations
FontAwesome 5
https://github.com/FortAwesome/Font-Awesome/blob/5.15.4/less/_larger.less
// Icon Sizes
// -------------------------
.larger(@factor) when (@factor > 0) {
.larger((@factor - 1));
.@{fa-css-prefix}-@{factor}x {
font-size: (@factor * 1em);
}
}
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -.0667em;
}
.@{fa-css-prefix}-xs {
font-size: .75em;
}
.@{fa-css-prefix}-sm {
font-size: .875em;
}
// Change the number below to create your own incrementations
// This currently creates classes .fa-1x - .fa-10x
.larger(10);
FontAwesome 4
https://github.com/FortAwesome/Font-Awesome/blob/v4.7.0/less/larger.less
// Icon Sizes
// -------------------------
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -15%;
}
.@{fa-css-prefix}-2x { font-size: 2em; }
.@{fa-css-prefix}-3x { font-size: 3em; }
.@{fa-css-prefix}-4x { font-size: 4em; }
.@{fa-css-prefix}-5x { font-size: 5em; }
// Your custom sizes
.@{fa-css-prefix}-6x { font-size: 6em; }
.@{fa-css-prefix}-7x { font-size: 7em; }
.@{fa-css-prefix}-8x { font-size: 8em; }
Just add the font awesome class like this:
class="fa fa-plus-circle fa-3x"
(You can increase the size as per 5x, 7x, 9x..)
You can also add custom CSS.
You can redefine/overwrite the default font-awesome sizes and also add you own sizes
.fa-1x{
font-size:0.8em;
}
.fa-2x{
font-size:1em;
}
.fa-3x{
font-size:1.2em;
}
.fa-4x{
font-size:1.4em;
}
.fa-5x{
font-size:1.6em;
}
.fa-mycustomx{
font-size:3.2em;
}