Ajouter des icônes sur vos pages web

Introduction

Cette page explique comment ajouter des icônes sur vos page web. Bien sûr, la première solution qui vient à l'esprit est de trouver et télécharger des images sur le serveur avant d'insérer une balise <img src="..."> là où les icônes doivent apparaitre. Cette solution présente plusieurs inconvénients :

les images ou les icônes doivent être libres de droits ;
le style des images doit être cohérent et constant sur l'ensemble du site ;
la sélection et le téléchargement des images peut vite devenir fastidieux.

La meilleure solution est d'utiliser un réseau de diffusion de contenu. Un serveur met à disposition un fichier JavaScript disponible à travers le réseau. Vous n'avez qu'à inclure le fichier dans la section <head> de vos page et des milliers d'icônes deviennent disponibles sur l'ensemble de votre page.

Friconix

Mon fournisseur préféré est Friconix:

ils proposent des milliers d'îcones avec un style cohérent ;
si un icône est manquant, il est possible d'en demander l'ajout ;
la documentation est claire et concise.

Intégration dans une page web

Comme expliqué dans le guide de démarrage rapide il faut charger le fichier JavaScript dans la section <head> de votre page :

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>

Dans la section <body> de la page, à chaque fois que vous désirez afficher un icône, copier/coller la balise <i> associée à cet icône. Supposons que l'on souhaite afficher l'icône warning de cette page : https://friconix.com/icon/fi-ensuxl-warning-solid/.

<body>
    The warning icon : <i class="fi-ensuxl-warning-solid"></i>
</body>

Le code précédent doit afficher quelque chose comme :

The warning icon :

Code source de la page complète

Un exemple élémentaire est disponible sur ce JSFiddle.

<!DOCTYPE html>
<html lang="en">
<head>
    <script defer src="https://friconix.com/cdn/friconix.js"></script>
</head>
<body>
    The warning icon : <i class="fi-ensuxl-warning-solid"></i>.
    <h1>Icons inherit style : <i class="fi-stluxl-extra-large"></i></h1>
    Animations : <i class="fi-xwluxl-spinner-wide fi-pulse"></i>
</body>

Voir aussi

Dernière mise à jour : 15/04/2019