¿Es posible hacer que los icons de Font Awesome sean más grandes que ‘fa-5x’?

Estoy usando este código HTML:

orders this week

Lo que crea:

enter image description here

¿Es posible hacer que el ícono sea más grande que fa-5x ? Hay un montón de espacio en blanco debajo que me gustaría que tome.

Font awesome es solo una fuente para que pueda usar el atributo de tamaño de fuente en su CSS para cambiar el tamaño del icono.

Entonces puedes agregar una clase al ícono de esta manera:

 .big-icon { font-size: 32px; } 

Alternativamente, puede editar la fuente y crear sus propios incrementos

FontAwesome 5

https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/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; } 

Puede redefinir / sobrescribir los tamaños predeterminados de fonts por defecto y también agregar sus propios tamaños

 .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; } 
  1. Simplemente agregue la impresionante clase de fuente así:

     class="fa fa-plus-circle fa-3x" 

    (Puede boost el tamaño según 5x, 7x, 9x ..)

  2. También puede agregar CSS personalizados.

Fuente impresionante uso de icons SVG. Entonces, puedes redimensionarlo para tu requerimiento.

solo usa la clase CSS para eso,

  .large-icon{ font-size:10em; //or font-size:200%; //or font-size:50px; } 

Fácil: solo use las clases predeterminadas fa-[size]x Font Awesome 5. Puede escalar icons de hasta 10x del font-size de font-size del elemento principal. Lea los documentos sobre el tamaño del icono.

Ejemplos: