Remplacer les icones FA par des images

En cours

Introduction

Depuis la version 4.0 de PHPBoost, nous avons choisis de remplacer les icônes .jpg / .png / .gif par la police d'icones Font Awesome.

Font Awesome fournit des icônes évolutifs vectoriels qui peuvent très facilement être personnalisés. Toutes les propriétés classiques CSS peuvent être utilisé sur Font-Awesome (la taille, la couleur, l'ombre portée, etc...)

Les avantages sont notamment les suivants :

• Avec un seul fichier, 605 icônes sont disponibles. (gain en taille, nombre de fichier)
• Avec un seul fichier, toutes les icônes sont étirables à l'infinies. (gain en taille, nombre de fichier)
• Très léger et pas de soucis de compatibilité car Font Awesome ne demande aucune surcouche supplémentaire (pas de Javascript).
• L'aspect graphique est géré par des propriété CSS. (modifications très simple)
  
  

Malgré les nombreux avantages, ils est possible que certaines personnes souhaitent conservés des images particulière dans certains cas. Nous allons voir dans les paragraphes qui suivent que la modification reste très simple, et vous permet avec une grande simplicité d'adapter les icônes à votre guise.

L'utilisation des icônes Font-Awesome

Afin d'afficher une icones Font-Awesome, nous utilisons la balise

<i>

et les classes CSS

.fa

.

Cela nous donne par exemple l’icône avec le code

<i class="fa fa-fort-awesome"></i>

Comme pour une police classique, la classe

.fa-fort-awesome

, nous permet de définir qu'elle icône nous souhaitons afficher.

Si on regarde le fichier font-awesome.css, nous constatons que la classe

.fa-fort-awesome

possède la propriété suivante :

.fa-fort-awesome:before { content: "/f286"; }

.

Le code "/f286" permet de cibler la bonne icônes dans le fichier de police.

Pour cela, il faut forcement définir que toutes les classes

.fa

utilisent la police.

C'est pourquoi dans le fichier font-awesome.css, nous trouvons :

.fa { font: FontAwesome; }

Remplacement de l'icônes FA par une image

D'habitude pour ajouter une image, nous utilisons la balise

<img src="mon_image.jpg" alt="mon_image" title="mon_image" />

Vu que nous utilisons les balises

<i>

pour Font Awesome, l'affichage d'une image, n'utilisera pas la balise

<img>

, mais nous utiliserons le code FontAwesome avec l'image en

background

.