Les glyphicons

Les glyphicons et thème responsive Bootstrap

Les glyphicons sont de petits icones pour habiller vos textes et donc pour mettre en valeur certains contenus de votre site. Il est possible d'utiliser les glyphicons sur les thèmes responsive Bootstrap d'e-monsite.

 

 Voyons comment cela fonctionne !

Exemple d'utilisation des Glyphicons

  Les Glyphicons ont une utilisation libre de droits.
  Les Glyphicons sont déjà tous embarqués dans votre thème Boostrap sur e-monsite.
  Les Glyphicons sont mobile-friendly.
  Leur nombre n'est pas infini - 200 tout de même

Le code HTML de la colonne de gauche :

<table>
<tbody>
<tr>
<td><em class="icon-ok"> </em></td>
<td>Les Glyphicons ont une utilisation libre de droits.</td>
</tr>
<tr>
<td><em class="icon-ok"> </em></td>
<td>Les Glyphicons sont déjà tous embarqués dans votre thème Boostrap sur e-monsite.</td>
</tr>
<tr>
<td><em class="icon-ok"> </em></td>
<td>Les Glyphicons sont mobile-friendly.</td>
</tr>
<tr>
<td><em class="icon-remove"> </em></td>
<td>Leur nombre n'est pas infini - 200 tout de même</td>
</tr>
</tbody>
</table>

Il est également possible d'insérer les Glyphicons sur des boutons. Par exemple, sur un bouton de contact :

 

Le code du bouton de contact ci-contre :

<a href="http://red-fish-web-syndrome.e-monsite.com/contact/contact.html">
<button type="button" class="btn btn-default btn-lg">
  <span><em class="icon-envelope">&nbsp;</em></span> Contactez-moi
</button>
</a>

Quelques exemples de Glyphicons disponibles et leur code HTML pour les intégrer

  <em class="icon-music">&nbsp;</em>
  <em class="icon-remove">&nbsp;</em>
  <em class="icon-ok">&nbsp;</em>
  <em class="icon-hand-right">&nbsp;</em>
  <em class="icon-euro">&nbsp;</em>
  <em class="icon-envelope">&nbsp;</em>
  <em class="icon-pencil">&nbsp;</em>
  <em class="icon-heart">&nbsp;</em>
  <em class="icon-trash">&nbsp;</em>
  <em class="icon-cog">&nbsp;</em>
  <em class="icon-play-circle">&nbsp;</em>
  <em class="icon-file">&nbsp;</em>
  <em class="icon-arrow-right">&nbsp;</em>
  <em class="icon-shopping-cart">&nbsp;</em>
  <em class="icon-eye-open">&nbsp;</em>

Il est possible de donner une couleur à ces Glyphicons en ajoutant une règle CSS dans la personnalisation de l'apparence.

Ici, le Glyphicon en forme de coeur est rose :

 

.icon-heart{
color: #FD6C9E;}

Voici la liste de tous les Glyphicons accessibles avec un thème responsive Bootstrap :
http://getbootstrap.com/components/#glyphicons

Des styles pour les Glyphicons

Bien entendu, vous pouvez ajouter des styles à ces Glyphicons. Un exemple avec le coeur rose que nous retrouvons avec des effets plus marqués et une grosse flèche bleue qui donneront un bon aperçu de ce qu'il est possible de réaliser.

 

Le code HTML

 <span><em class="icon-heart style31">&nbsp;</em></span>

Le code CSS pour la class "style31" :

 .style31 {
    color: #FD6C9E;
    font-size: 8em;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FD6C9E, 0 0 30px #FD6C9E, 0 0 40px #FD6C9E, 0 0 50px #FD6C9E, 0 0 75px #FD6C9E;}
 

Le code HTML

<span><em class="icon-arrow-right style200">&nbsp;</em></span>

Le code CSS pour la class "style200" :

 .style200 {
    font-size: 15em;
    color: #2DAEBF;
    text-shadow: 0px 1px 0px #0092B3, 0px 2px 0px #0087A6, 0px 3px 0px #008099, 0px 4px 0px #00758C, 0px 5px 0px #555, 0px 6px 0px #006A80, 0px 0px 0px #006073, 0px 8px 7px #056;}