Is it possible to make Font Awesome icons larger than fa-5x

Question

I am using this HTML code    lt div class  col-lg-4  gt     lt div class  panel  gt       lt div class  panel-heading  gt         lt div class  row  gt           lt div class  col-xs-3  gt             lt i class  fa fa-cogs fa-5x  gt  lt  i gt           lt  div gt           lt div class  col-xs-9 text-right  gt             lt div class  huge  gt               lt   db query  SELECT COUNT    FROM orders WHERE customer          SESSION  customer        AND EntryDate BETWEEN      date  d-M-y   strtotime  Monday this week         AND      date  d-M-y   strtotime  Friday this week             gt             lt  div gt               lt div gt orders this week lt  div gt           lt  div gt         lt  div gt       lt  div gt       lt a href  view orders  gt         lt div class  panel-footer  gt           lt span class  pull-left  gt View Details lt  span gt             lt span class  pull-right  gt  lt i class  fa fa-arrow-circle-right  gt  lt  i gt  lt  span gt               lt div class  clearfix  gt  lt  div gt         lt  div gt       lt  a gt     lt  div gt   lt  div gt    Which creates     Is it possible to make the icon larger than fa-5x  There is a lot of white space beneath it that I would like it to take up

User · Answer

Font awesome use SVG icons  So  you can resize it for your requirment   just use CSS class for that        large-icon         font-size 10em           or       font-size 200           or       font-size 50px

User · Answer

You can also define a scale transformation  with CSS like so   larger-icon    transform scale 2

User · Answer

Alternatively you can edit the source and create your own incrementations  FontAwesome 5  https   github com FortAwesome Font-Awesome blob master web-fonts-with-css less  larger less     Icon Sizes    -------------------------   larger  factor  when   factor  gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Easy     just use Font Awesome 5 s default fa- size x classes  You can scale icons up to 10x of the parent element s font-size Read the docs about icon sizing   Examples    lt span class  fas fa-info-circle fa-6x  gt  lt  span gt   lt span class  fas fa-info-circle fa-7x  gt  lt  span gt   lt span class  fas fa-info-circle fa-8x  gt  lt  span gt   lt span class  fas fa-info-circle fa-9x  gt  lt  span gt   lt span class  fas fa-info-circle fa-10x  gt  lt  span gt

[html] Is it possible to make Font Awesome icons larger than 'fa-5x'?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to font-awesome