web-dev-qa-db-fra.com

Police Awesome 5 Les icônes ne fonctionnent pas sur Bootstrap 4

J'essayais d'ajouter l'icône github (class="fas fa-github") sur un bouton d'amorçage sombre, mais l'icône et le texte du bouton n'apparaissent pas (la console ne montre rien)

Code:

<div class="jumbotron">
    <h1 class="display-4">Henrique Borges</h1>
    <p class="lead">Programador experiente e Web Designer.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
    <a class="fas fa-github btn btn-dark btn-lg" href="#" role="button">Github</a>
    </p>
</div>

J'ai déjà inclus les bibliothèques BS et FA:

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/fontawesome-all.min.js"></script>
htmlcsstwitter-bootstrapfont-awesome
9
HenriqueHBR

Essayez l'extrait de code. Changé le fas fa-github en fab fa-github. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">



<div class="jumbotron">
  <h1 class="display-4">Henrique Borges</h1>
  <p class="lead">Programador experiente e Web Designer.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <i class="fab fa-github btn btn-dark btn-lg" href="#" role="button"> Github</i>
  </p>
</div>

10
Lakindu Gunasekara

J'ai déjà rencontré ce problème auparavant, en particulier avec la classe fas. Pour moi, cela a toujours été de mettre manuellement à niveau mon impressionnante étiquette de feuille de style de police dans ma tête.

Pour une raison quelconque, les gestionnaires de dépendances comme les fils ne disposent pas toujours de la toute dernière version de font awesome.

https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

<!-- FontAwesome -->
  <link 
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
2
HashRocketSyntax