Est-il possible de faire des icons Font Awesome plus grandes que «fa-5x»?

J’utilise ce code HTML:

orders this week

Ce qui crée:

entrer la description de l'image ici

Est-il possible de rendre l’icône plus grande que fa-5x ? Il y a beaucoup d’espace blanc sous lequel j’aimerais qu’il prenne place.

La police génial est juste une police, donc vous pouvez utiliser l’atsortingbut de taille de police dans votre CSS pour modifier la taille de l’icône.

Donc, vous pouvez simplement append une classe à l’icône comme ceci:

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

Vous pouvez également modifier la source et créer vos propres incrémentations

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; } 

Vous pouvez redéfinir / écraser les tailles de fonts par défaut et append vos propres tailles

 .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. Ajoutez simplement la classe géniale comme ceci:

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

    (Vous pouvez augmenter la taille pour 5x, 7x, 9x ..)

  2. Vous pouvez également append des CSS personnalisés.

Police génial utiliser des icons SVG. Donc, vous pouvez le redimensionner pour vos besoins.

il suffit d’utiliser la classe CSS pour cela,

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

Facile – utilisez simplement les classes fa-[size]x par défaut de Font Awesome 5. Vous pouvez mettre à l’échelle les icons jusqu’à 10 fois la font-size la font-size de l’élément parent. Lisez les documents sur le dimensionnement des icons.

Exemples: