web-dev-qa-db-fra.com

La taille des icônes de Font Awesome n'augmente pas

J'ai des icônes Font Awesome installées sur this site. La taille des icônes n'augmente pas, même après avoir ajouté la classe.

<ul class="stay-connected-inner list-inline">
  <li><a href="#"><i class="fa fa-Twitter fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-medium fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
</ul>
htmlcssfont-awesome
9
Fahad Uddin

Pour augmenter la taille des icônes par rapport à leur conteneur, utilisez les classes fa-lg (augmentation de 33%), fa-2x, fa-3x, fa-4x ou fa-5x.

            <ul class="stay-connected-inner list-inline">
              <li><a href="#"><i class="fa fa-Twitter fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-medium fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
            </ul>
18
Arun

les icônes font-awesome sont des textes. Utilisez donc font-size pour augmenter la taille des icônes font-awesome.

Par exemple,

i {
    font-size: 18px;
}
6
Omprakash Arumugam

si vous utilisez font awesome ou des icônes awesome font dans Angular 5+. Le moyen le plus simple d’augmenter votre taille de police personnalisée est le suivant: 

.svg-inline--fa{
  font-size:1.500em; //use your custom font siz. If you do not want to apply the font awesome size classes
}

Appliquez-le dans votre composant personnalisé pour voir les modifications immédiatement. 

0
Ragavan Rajan

utiliser le css en ligne suivant 

<style type="text/css">
    .fa-3{
      font-size: 30px;
    }
</style>
0
Ravi Roshan

J'ai eu le même problème. Pour une raison quelconque, la classe fa est prioritaire sur la classe fa-2x de la bibliothèque de polices géniale. J'ai trouvé un blog qu'ils savaient que c'était un problème en 2014 mais ne l'ont pas encore abordé. Sur mon site, j'ai ajouté à nouveau la classe de style et ajouté! Important qui a résolu mon problème.

<style>
      .fa-2x{
        font-size:2em !important;
    };
</style>

0
Gene Potter

Veuillez vérifier ce lien pour la taille des icônes de police impressionnantes . http://fontawesome.io/examples/

Pour augmenter la taille des icônes par rapport à leur conteneur, utilisez les classes fa-lg (augmentation de 33%), fa-2x, fa-3x, fa-4x ou fa-5x.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
0
Jenti Dabhi