Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Font Awesome Bootstrap

Comme les Glyphicons, les "Font Awesome" sont des icônes basés sur des polices de caractères. Ils vous offrent une grande souplesse au niveau de la personnalisation grâce au CSS.

Installation

Nous avons 2 méthodes pour intégrer les fonts awesome dans des pages web

1. Sur le site

Il suffit de télécharger l'archive sur le site et la décompresser dans le dossier de votre choix. Si vous avez installé Bootstrap via Bower, je vous conseille d'extraire les dossiers "css" et "font" des fonts awesome dans ce dossier bower_components/bootstrap/dist/.

Cela aura pour effet d'ajouter les feuilles de style dans le dossier font et les polices de caractères dans le dossier font.

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/font-awesome.css">

Comme pour les autres feuilles de style, vous aurez 2 fichiers : font-awesome.css et font-awesome.min.css.

2. Via les CDN

Qu'est ce qu'un CDN ?

Un content delivery network (CDN), ou réseau de diffusion de contenu, est constitué d’ ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données à des utilisateurs.
Source Wikipédia

En savoir + sur les CDN

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

Utilisation

<i class="fa fa-nom-image"></i>

Exemple

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

Il ne faut pas mettre de texte entre les balises i, ce n'est pas fait pour ça !.

Ressources