web-dev-qa-db-fra.com

Comment utiliser les glyphicons sociaux dans une page Web mise en œuvre par bootstrap?

Je ne suis pas en mesure d'utiliser les icônes de glyphes de médias sociaux dans une page Web mise en œuvre par bootstrap ..__ J'ai pu utiliser les outils habituels tels que recherche, globe et bien d'autres.

Voici comment j'ai utilisé les habituels:

<span class="glyphicons glyphicons-search"></span>

Comment pouvez-vous implémenter la méthode ci-dessus pour les glyphicons sociaux?

twitter-bootstrapglyphicons
14
maheshkumar

Les glyphicons fournis gratuitement avec Bootstrap 3 sont un sous-ensemble de la bibliothèque complète de Glyphicons payée et n'incluent pas le jeu d'icônes de médias sociaux. 

Au lieu de cela, vous pouvez utiliser Font Awesome , une alternative gratuite entièrement prise en charge (et le kit d'icônes préféré dans Bootstrap 4 ), qui comporte un jeu d'icônes de marque gratuit:

 enter image description here

Font Awesome Version 4 - Marques - Démo dans jsFiddle & Stack Snippets:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-bitbucket"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-github"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-Steam"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-Twitter"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-Vine"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-youtube"></i>



<style type="text/css">
  .fa {
    padding: 4px;
    width: 200px;
  }

  .fa::before {
    display: inline-block;
    /* .fa-fw */
    width: 1.28571429em;
    text-align: center;
  }

  .fa::after {
    content: attr(class);
    font-family: consolas, monospace;
    font-size: 15px;
    /* .code */
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    margin-left: 5px;
  }
</style>

Pour Font Awesome 5, vous pouvez toujours utiliser des marques avec le paquet séparé brands :

<i class="fab fa-youtube"></i>
53
KyleMit

collez ceci dans la partie principale de votre code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

et juste un exemple d'insertion d'icône facebook

<i class="fa fa-facebook"></i>

Pour la liste complète des icônes de glyphes, visitez https://fortawesome.github.io/Font-Awesome/icons/

21
Nanoripper

Si vous utilisez font-awesome 5, les classes ont changé.

Vous avez maintenant plus de préfixes que simplement fa: fab, fas, far, fal.

Pour afficher le logo Twitter par exemple, vous avez besoin de quelque chose comme ceci.

<i class="fab fa-Twitter"></i>.

Vous pouvez en savoir plus sur la migration de font-awesome 4 à 5 ici .

0
Radu Diță