La bibliothèque d'icônes font awesome est la bibliothèque de référence pour les icônes web. Elle permet d'intégrer plus de 500 icônes à n'importe quel contenu web. Cette documentatio a pour but de récapituler la marche à suivre pour intégrer les font awesome dans les entête de vos blocs. 

La spécificité technique des icônes font awesome est d'être traitées comme n'importe quel caractère textuel, elles s'intègrent donc parfaitement au contenu, ne posent pas, comme les images, de problème de résolution et peuvent voir s'appliquer les mêmes styles que les textes (taille, couleur, effets...). Le webkit AMU vous permet de placer les icônes dans les entête de blocs pour les personnaliser.

Choisissez votre icône

Plus de 500 icônes sont disponibles sur fortawesome.github.io/Font-Awesome/icons/

Aperçu de la bibliothèque font awesome

Sélectionnez l'icône de votre choix et copiez le code de l’icone commençant par fa – par exemple fa-bed, fa-bookmark, fa-calendar-o etc.

Intégrez l'icône

Pour intégrer l'icône, éditez votre bloc selon la méthode appropriée (bloc standard ou bloc lié à la page) puis collez le code de l’icône dans le champ Style (ou CSS class(es) ). Enregistrez.

Zone style dans laquelle intégrer le code de l'icône

Changer la couleur de l'icône

Les icônes sont personnalisables en 6 couleurs (orange, bleu, cyan, ,vert, violet, rouge). La couleur est à rajouter dans le champ Style après le code de l’icône. Par exemple fa-coffee rouge, fa-coffe bleu, fa-coffee violet etc. Voyez un aperçu du rendu de ces couleurs ci-dessous.

aperçu des 6 couleurs disponibles pour les icônes font awesome


Lisez aussi

Les blocs
Le module AMU Additional blocs