Comment redimensionner les icônes en utilisant le cadre svg

Question

Je suis police Impressionnant 5 au travail en utilisant:

<i class="fa fa-user"></i> 
<script src="/js/packs/solid.js"></script> 
<script src="/js/fontawesome.js"></script> 

Mais coiffant la balise i n'a pas eu d'effet. J'ai donc essayé d'utiliser une police web à la place:

<link rel="stylesheet" href="css/font-awesome-core.css"> 
<link rel="stylesheet" href="css/font-awesome-solid.css"> 
<i class="fas fa-user"></i> 

et cela a fonctionné. Mais ne devrais-je pas utiliser le cadre svg? Je ne suis pas un traditionaliste de Font Awesome. Pouvez-vous styler des polices avec différentes couleurs, tailles et rotations?

Answer 1

La structure SVG de FontAwesome5 convertit la balise en code SVG entièrement rendu dans la source.

Le style de l'icône/SVG peut être contrôlé en stylisant le parent.

<div style="font-size: 200%; color: red"> 
<i class="fas fa-user"></i> 
</div> 

Cela rendra l'icône à la taille 2x et en rouge.