IV. Design et interface

Remplacer les icones FA par des images

Dernière mise à jour : 25/01/2020 à 11h47
Table des matières
  1. Introduction
  2. L'utilisation des icônes Font-Awesome
  3. Remplacement de l'icône FA par une image
    1. Remplacer certains icônes FA par une image classique
    2. Remplacer tous les icônes FA par une image classique
  4. Exemple des icônes d'annonce dans le forum
    1. Préparation des fichiers
    2. Modification du fichier forum.css
  5. Conclusion

Introduction



Depuis la version 4.0 de PHPBoost, nous avons choisis de remplacer les icônes .jpg / .png / .gif par la police d’icônes 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ées 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 fichiers)
  • Avec un seul fichier, tous les icônes sont étirables à l'infini. (gain en taille, nombre de fichiers)
  • 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 simples)

Malgré les nombreux avantages, il est possible que certaines personnes souhaitent conserver des images particulières 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 un icône 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="fab fa-fort-awesome"></i>


Comme pour une police classique, la classe 
.fa-fort-awesome
, nous permet de définir quel 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 le bon icône dans le fichier de police de caractères.

Pour cela, il faut forcement définir que toutes les classes 
.fa, .fab, .fas, .far
utilisent la police.

C'est pourquoi dans le fichier font-awesome.css, nous trouvons : 
.fa { font: FontAwesome; }




Remplacement de l'icône 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 certains icônes FA par une image classique
  • Remplacer tous les icônes FA par une image classique


Nous rappelons d'abord qu'il ne faut jamais travailler sur les fichiers du dossier /{MODULE}/templates/ présents à la racine de votre site, mais toujours dans le répertoire de son thème /templates/{THEME}/modules/{MODULE}/ !

Remplacer certains icônes FA par une image classique



Pour la modification, seul des modifications CSS sont à prévoir. Nous allons prendre le cas de l’icône 
.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 utiliser 
.fa-remove:before { content: "/f00d"; }
, il est nécessaire de l'annuler pour ne pas afficher l’icône FA.

Vu que l'on ne souhaite pas remplacer tous les icônes, il est important de cibler la modification.

SI par exemple, vous souhaitez faire la modification uniquement 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/{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’élément malgré le contenu vide.

Dans le cas où 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/{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 tous 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 icône. 
.fa-remove { background-image: url(/templates/{THEME}/theme/images/mon_image.jpg); }


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



Exemple des icônes d'annonce dans le forum



Dans le paragraphe ci-dessous, nous allons voir comment modifier le code existant pour afficher des images à la place des icônes FA pour le statut des forums.

Préparation des fichiers



  • Vérifiez dans votre dossier /templates/{THEME}/modules/ que le dossier forum existe :
    • Si le dossier existe, il faudra ajouter dans le sous-répertoire /templates/{THEME}/modules/forum/images/ vos images mon-image.png ; mon-image.jpg ; mon-image.gif ; etc. (créez le répertoire /templates/{THEME}/modules/forum/images/ si besoin).
    • Si le dossier n'existe pas, créez le dossier /templates/{THEME}/modules/forum/ et dedans créez le dossier /templates/{THEME}/modules/forum/images/ pour y stocker vos images.
  • Récupérez le fichier forum.css présent dans le module /forum/templates/forum.css à la racine du site et "copiez" le dans le dossier de votre thème /templates/{THEME}/modules/forum/.
  • Éditez le fichier css /templates/{THEME}/modules/forum/forum.css


Modification du fichier forum.css



A partir de la ligne 625 en v5.0 ou ligne 643 en v5.1, vous devriez trouver les déclarations des icônes FA avec le code suivant :

Code CSS : 
.fa-announce:before,
.fa-announce-new:before { content: "\f075"; }
.fa-announce-hot:before,
.fa-announce-new-hot:before { content: "\f086"; }
.fa-announce-lock:before,
.fa-announce-new-lock:before { content: "\f023"; }
.fa-announce-post:before,
.fa-announce-new-post:before { content: "\f071"; }
.fa-announce-top:before,
.fa-announce-new-top:before { content: "\f06a"; }
.fa-announce:before,
.fa-announce-hot:before { color: #D1D2D4; }
.fa-announce-new:before,
.fa-announce-new-hot:before { color: #676A74; }


Pour chaque élément, vous pouvez remplacer la déclaration FA par une déclaration avec l'url de votre image.
Icone FA 
.fa-icone:before { content: "\f007"; }
Image 
.fa-icone:before { content: url('images/mon-image.png'); }


Conclusion



Finalement, comme nous avons pu le voir au travers des paragraphes précédents, les modifications sont assez simples. Le nombre de ligne de code ajouté dépendra du nombre d'images modifiées.

Attention à l'URL des images qui dépendra de votre configuration.
Cette page a été vue 17227 fois