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>
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"> </em></span> Contactez-moi
</button>
</a>
Quelques exemples de Glyphicons disponibles et leur code HTML pour les intégrer
<em class="icon-music"> </em> | |
<em class="icon-remove"> </em> | |
<em class="icon-ok"> </em> | |
<em class="icon-hand-right"> </em> | |
<em class="icon-euro"> </em> | |
<em class="icon-envelope"> </em> | |
<em class="icon-pencil"> </em> | |
<em class="icon-heart"> </em> | |
<em class="icon-trash"> </em> | |
<em class="icon-cog"> </em> | |
<em class="icon-play-circle"> </em> | |
<em class="icon-file"> </em> | |
<em class="icon-arrow-right"> </em> | |
<em class="icon-shopping-cart"> </em> | |
<em class="icon-eye-open"> </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"> </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"> </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)
- 1. | 22/05/2015
- | 22/05/2015
- 2. | 30/01/2016
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 !
- | 02/02/2016
- 3. | 02/02/2016
- 4. | 02/02/2016
- 5. | 02/02/2016