web-dev-qa-db-fra.com

Boutons sociaux utilisant Twitter Bootstrap 3

J'essaie d'ajouter quelques boutons sociaux à mon site Web, le style est correct mais les icônes n'apparaissent pas. Je suppose que cela doit être un problème avec Font Awesome car c'est de là que viennent les icônes, mais je ne vois pas où je me suis trompé.

Je l'ai lié dans la tête comme ça:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

et les boutons du corps comme ça:

<div id="contact_page">
  <div class="container">
    <div class="row">
      <div class="span4 pull-center">
        <button class="btn btn-Twitter"><i class="icon-Twitter"></i> | Connect with Twitter</button><br>
        <button class="btn btn-linkedin"><i class="icon-linkedin"></i> | Connect with LinkedIn</button><br>
      </div>
    </div>
  </div> 
</div>
htmlcsstwitter-bootstrapbutton
16
user2953989

Puisque vous essayez d'utiliser Font Awesome 4.0.3, vous devrez utiliser les derniers noms de classe pour bien faire les choses. Au lieu de icon-* vous devrez utiliser le fa fa-* (plus de changements dans le exemples officiels )

Dans votre cas, modifiez le <i> à:

<i class="fa fa-Twitter"></i>
<i class="fa fa-linkedin"></i>

Si vous voulez avoir quelque chose de plus avancé qu'une simple icône et un simple séparateur, vous pouvez vérifier les Boutons sociaux pour Bootstrap (Avertissement: je suis le créateur) qui fonctionne bien avec les dernières versions et c'est très flexible si vous voulez en ajouter plus.

Social Buttons for Bootstrap Preview

38
Lipis

Vous n'avez probablement pas ces cours.

Vérifiez ceci: Boutons sociaux pour Bootstrap

ou cet exemple: Icônes de médias sociaux avec une police géniale

4
Norbert Pisz