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;}

Commentaires (7)

J.B.C

Encore merci Hoscar pour cette découverte, je me sers maintenant des glyphicons, mot que je n'arrive pas à retenir, mais ce n'est pas grave ton site est dans mes favoris !

hoscar

Bonjour J.B.C, et merci pour vos commentaires.
Un glyphe est une représentation graphique d'un caractère ou d'une typographie. Un glyphicon peut s'apparenter aux hiéroglyphes : une écriture en symboles. Ici, ces symboles sont des icônes, on appelle ça des glyphicons.
Enfin bref ;) C'est parfois bien utile. Merci encore pour vos retours.

mothautcanton
  • 3. mothautcanton (site web) | 30/01/2016

Bonjour,
je viens de découvrir les glyphicons, mais je n'arrive pas à les afficher sur mon site, je n'ai que des petits carrés à leur place...
je fais sans doute quelque chose de travers...
une idée ?
merci !

hoscar

Chouette votre site mothautcanton. MP pour plus de précisions, je ne vois pas où cela ne le fait pas au niveau des glyphicons.

mothautcanton
  • 5. mothautcanton (site web) | 02/02/2016

merci pour le site, je vous envoie un mp !

mothautcanton
  • 6. mothautcanton | 02/02/2016

je crois avoir trouvé en tâtonnant comment il faut faire !

mothautcanton
  • 7. mothautcanton | 02/02/2016

en fait cela a toujours marché.. mais il faut publier la page pour que la modification s'affiche !!! je me contentais d'essayer de l visualiser dans l'éditeur !

Ajouter un commentaire