FontAwesome: ajouter une police d'icônes pour votre site web

FontAwesome permet d'ajouter une police d'icônes simplement sur votre site web (585 icônes). Au contraire des images, les icônes s'adapteront à la taille du texte sans pixéliser. FontAwesome intègre également des règles CSS pour faciliter la mise en page et l'utilisation de la police.

Les icônes peuvent être utilisées dans le thème du site mais s'insèrent facilement dans le contenu d'un article.

FontAwesome peut être utilisé facilement sur n'importe quel site, du simple site fait à la main en HTML au CMS. Avec PluXml, il est existe une solution facile avec PlxMyFontAwesome, dans ce cas il suffira simplement d'activer le plugin pour en profiter.

Installer FontAwesome

Pour les utilisateurs de PluXml, je recommande l'utilisation de PlxMyFontAwesome. Il existe aussi une méthode plus générique valable pour n'importe quel site.

Pour information, il est possible de passer par un site tiers permettant d'utiliser automatiquement la dernière version disponible. Je ne recommanderai pas cette méthode mais elle est documentée sur le site du projet.

PlxMyFontAwesome: plugin pour PluXml

PlxMyFontAwesome permet d'installer et d'utiliser très simplement FontAwesome avec PluXml. La police est contenue dans le plugin et évitera de faire appel à un site tiers pour afficher les icônes (tracking des utilisateurs). Il inclut également la documentation nécessaire (code, css class et unicode) pour l'utiliser en toute autonomie.

Pour installer le plugin, il faut commencer par récupérer l'archive sur mon dépôt de plugins Pluxml. Il est également disponible sur Github mais il faut penser à renommer le dossier contenu dans l'archive en "plxFontAwesome".

Une fois l'archive décompressée, il faut envoyer le dossier "plxFontAwesome" via FTP sur votre site et le déposer dans "/plugins".

Après avoir copié le plugin dans votre PluXml, il ne vous reste plus qu’à l’activer. Pour ça, il faut se connecter sur le site en tant qu'administrateur et aller dans le menu: Paramètres > Plugins.

Dans l'onglet Plugins inactifs, sélectionner le plugin plxFontAwesome et dans le menu déroulant "Pour la sélection" choisir "Activer", puis cliquer sur le bouton "Ok" pour enregistrer la modification.

Une fois activé, vous devriez avoir accès dans le menu à un onglet nommé FontAwesome avec le récapitulatif de toutes les icônes disponibles.

L'avantage du plugin est d'activer FontAwesome sur tous les thèmes disponibles de votre site. Il est possible d'activer et désactiver la police facilement (ou la supprimer si elle n'est plus utile) depuis l'interface d'administration de PluXml.

On peut maintenant passer directement à la partie Utiliser FontAwesome.

Installer FontAwesome pour n'importe quel site

Cette solution devrait fonctionner pour n'importe quel site.

Récupérer l'archive sur le site officiel.
Copier le dossier FontAwesome sur votre site.
Ajouter la feuille de style font-awesome.min.css dans la balise de votre site.

code à ajouter:

index.html

<head>
...
<link rel="stylesheet" href="http://blog.niqnutn.com/path/to/font-awesome/css/font-awesome.min.css">
</head>

Il faudra indiquer le bon chemin menant vers le dossier de FontAwesome.

Utiliser FontAwesome

Une fois que FontAwesome est bien installé sur le site, on va pouvoir l'utiliser.

Pour les exemples on prendra l'icône fa-rocket. On retrouve toutes les informations de cette icône sur cette page. Pour ceux qui utilisent le plugin PlxMyFontAwesome, la liste des icônes est disponible dans le menu, sinon elle est disponible ici.

Ajouter des icones dans votre page/article

La solution la plus simple consiste à récupérer et copier le code de l'icône dans votre page.

Pour ajouter , il faudra ajouter dans le code HTML de la page:

index.html

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

On ne pas faire plus simple .

Ajouter des icônes dans le css/thème

On peut également intégrer des icônes dans le thème de votre site via le fichier CSS.

Fil RSS des articles
Pour rajouter une icône devant la classe .rss, il suffit d'ajouter:

index.html

<p class="rss">Fil RSS des articles</p>

style.css

.rss:before {
    font-family: FontAwesome;
    content: "\\f135";
}

Il faut bien penser à ajouter la police FontAwesome et précéder l'unicode du caractère \\

Mettre en forme les icônes

Je ne vais pas détailler toutes les fonctionnalités de FontAwesome, mais il existe différentes astuces pour mettre en forme correctement ses icônes.

Agrandir la taille de l'icone

Il est possible de définir rapidement la taille des icônes.

index.html

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Empiler les icônes

Il est possible de créer des icônes un peu plus évoluées.

Ajouter un fond rond derrière une image:

index.html

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>

Faire un calendrier:
27

index.html

<span class="fa-stack fa-lg">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>

style.css

.calendar-text { margin-top: .3em; }

Les autres astuces sont disponibles sur http://fontawesome.io/examples/ et aussi sur http://blog.fontawesome.io/.

Convertir facilement des icônes en .png

Si vous avez besoin d'ajouter des images dans un support qui sont disponibles dans FontAwesome ou d'autres polices d'icônes, je vous conseille d'aller sur http://fa2png.io/. On peut générer très facilement une image à partir d'une icône et définir la couleur, la couleur de fond et la taille.