IV. Design et interface

Remplacer les icones FA par des images

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 11/03/2016 à 15h12
Table des matières
  1. Introduction
  2. L'utilisation des icônes Font-Awesome
  3. Remplacement de l'icônes FA par une image
    1. Remplacer certaines icônes FA par une image classique
    2. Remplacer toutes les icônes FA par une image classique
  4. Conclusion

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
.



Plusieurs cas s'offre à nous :



  • Remplacer certaines icônes FA par une image classique
  • Remplacer toutes les icônes FA par une image classique








Remplacer certaines icônes FA par une image classique



Pour la modification, seul des modifications CSS sont à prévoir. Nous allons prendre le cas de l'icone 
.fa-remove
qui affiche la croix suivante



La classe 
.fa
déclare la police, vu que l'on utilisera un background, il n'y a pas lieu de la modifier.



La classe 
.fa-remove:before
déclare le caractère que l'on souhaite utilisé 
.fa-remove:before { content: "/f00d"; }
, il est nécessaire de l'annuler pour ne pas afficher l'icone FA.



Vu que l'on ne souhaite pas remplacer toutes les icones, il est important de ciblé la modification.



SI par exemple, vous souhaitez faire la modification que dans le module shoutbox, il nécessaire de faire la modification dans le fichier CSS du module shoutbox et utilisez l'identifiant unique du module 
#module-mini-shoutbox
.



Pour supprimer notre icône uniquement dans la shoutbox, il est nécessaire d'ajouter dans le fichier shoutbox_mini.css la ligne :



#module-mini-shoutbox .fa-remove:before { content: ""; }




Il faut maintenant ajouter l'appel à l'image de votre choix en utilisant un 
background
sur la classe 
.fa-remove




Code CSS : 
#module-mini-shoutbox .fa-remove {
  background-image: url(/templates/mon_theme/theme/images/mon_image.jpg);
  width: 16px;
  height: 16px;
  content : " ";
}
Bien sûr, nous définissons la taille de l'image et ajoutons 
content : " ";
pour forcer l'affichage de l'élement malgré le contenu vide.



Dans le cas ou l’icône FA serait sur une balise 
<a>
, il faudra plutôt mettre le 
background
sur la pseudo-classe before :



Code CSS : 
#module-mini-shoutbox .fa-remove { 
  background-image: url(/templates/mon_theme/theme/images/mon_image.jpg); 
  width: 16px; 
  height: 16px; 
  content : " "; 
}
Il sera peut être nécessaire d'ajuster les marges en fonction des éléments.



L'opération est à reconduire pour chaque image que vous souhaitez remplacer.







Remplacer toutes les icônes FA par une image classique



Dans ce cas, si vous ne souhaitez pas du tout utiliser les icônes FA, vous pouvez supprimer les fichiers font-awesome et les appels afin de gagner un peu de place.



Vous n'avez alors plus besoin de cibler le module et les modifications peuvent être faite dans le fichier global.css.



Pour gagner quelques ligne de code, vous pouvez appliquer les modifications génériques sur la classes 
.fa
:



Code CSS : 
.fa {
  width: 16px; 
  height: 16px; 
  content : " "; 
}




il ne reste que l'image à définir pour chaque icones. 
.fa-remove { background-image: url(/templates/mon_theme/theme/images/mon_image.jpg); }




Le reste du travail sera sensiblement identique à un remplacement partiel.







Conclusion



Finalement, comme nous avons pu le voir aux travers des paragraphes précédent, les modifications sont assez simple. Le nombre de ligne de code ajouté dépendra du nombre d'images modifiés.



Attention à l'URL des images qui dépendra de votre configuration.