Utiliser les icônes Font Awesome dans un thème XOOPS

Thèmes 7733
Auteur
Alain
Publication
12-07-2021
12-07-2021
Mise à jour
03-11-2021
Note
5.0 (2 votes)
Niveau
Normal
Utiliser les icônes Font Awesome dans un thème XOOPS

Utiliser les icônes Font Awesome dans un thème XOOPS Vous souhaitez utiliser les magnifiques icônes Font Awesome disponibles gratuitement (en partie) dans votre thème XOOPS ?

Alors ce tutoriel est rédigé pour vous ! Notez qu'il se basera sur un thème XOOPS mais vous pouvez le suivre en utilisant n'importe quel thème hors utilisation de XOOPS.


Utilisation dans une page web


1. Recherche d'icônes
Nous avons maintenant intégré la librairie Font Awesome sur notre site web.
Il est temps maintenant de chercher les icônes que nous allons insérer.

2. Affichage basique
Nous allons maintenant entrer le code nécessaire pour faire apparaître ces icônes.

La syntaxe de base est la suivante :
Icones "Solid" ("fas") :
<span class="fas fa-nom-icône"></span>

Icones "Brand" ("fab") :
<span class="fab fa-nom-icône"></span>


3. Exemples basiques
Icône Code
<span class="fas fa-anchor"></span>
<span class="fas fa-bell"></span>
<span class="fab fa-ubuntu"></span>
<span class="fab fa-java"></span>


4. Utilisation d'options
En plus de la syntaxe de base, on peut ajouter des paramètres utiles pour un affichage adapté à la situation.

La syntaxe avec options est la suivante :
<span class="fas fa-nom-icône [option 1] [option 2] [option 3]"></span>

Les options sont de plusieurs natures :
  • Taille
    fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-5x, fa-7x, fa-10x

  • Alignement vertical
    (Alignement vertical parfait quelque soit la largeur des icônes, "Fixed Width")
    fa-fw

  • Rotation et renversement
    fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-horizontal, fa-flip-vertical, fa-flip-both

  • Icônes animés
    fa-spin, fa-pulse
Il existe d'autres options.
Icônes colorés
Il suffit d'ajouter à l'intérieur de la balise < span > le code suivant :
style = "color:#code-couleur-hexa"
Vous trouverez la documentation complète des options sur la page dédiée du site hôte.



5. Exemples avec options
Icône Code
<span class="fas fa-anchor fa-2x" style="color:slategray"></span>
<span class="fas fa-lightbulb fa-3x fa-flip-vertical" style="color:#FFFACD"></span>
<span class="fab fa-ubuntu fa-5x fa-spin" style="color:#DB4E2A"></span>
<span class="fas fa-fan fa-2x fa-pulse" style="color:LightSalmon"></span>
<span class="fas fa-palette fa-3x xoopsweb-color"></span>

Vous avez maintenant tout ce qu'il faut pour profiter de la librairie Font Awesome dans vos pages web !
Bonne utilisation !