Iconographie open-source pour les designers et les développeurs
Nous sommes un collectif d'individus passionnés créant de belles bibliothèques d'icônes et de polices pour une utilisation directe dans vos conceptions et développements.

Material Design Icons vous permet d'utiliser les icônes de votre choix, ici en HTML ou en CSS, parmi plus de 7000 icônes différentes.


Rendez-vous sur la page de documentation nommée Getting Started with the Webfont puis copiez le lien commençant par https://cdn.jsdelivr.net. Au moment où j'écris ce sujet, le lien complet est https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css ; je vous conseille d'aller voir directement sur leur site pour avoir le lien à jour.

Dans le template overall_header de votre forum, ajouter entre les balises head le code suivant:


Vous pouvez désormais utiliser les icônes MDI de la manière suivante:
Rendez-vous sur le site (https://pictogrammers.com/library/mdi/), cliquez sur l'icône de votre choix: vous aurez une fenêtre modal qui s'ouvrira.

HTML: En haut à gauche du modal, vous aurez le nom de l'icône choisie. Dans mon cas, il s'agit de account-convert.



Pour l'utiliser en HTML, le code s'écrira de cette façon: utilisez l'élément que vous souhaitez (une div, span..) et mettez-y les classes mdi mdi-nom-de-l'icone. Dans mon cas, cela donnerait:


Votre icône devrait désormais apparaître sans souci.

CSS: Légèrement plus compliqué, mais s'apprend rapidement: côté CSS, il faudra utiliser le codepoint de l'icône, trouvable en haut à droite du modal:



Dans mon cas, il s'agit de F000A. Pour l'utiliser en CSS, ce sera seulement en ::before et en ::after. Le content sera le codepoint précédé d'une barre oblique inverse/d'un antislash (\); le font-family devra être 'Material Design Icons'.
Un exemple plus parlant:



Ces deux propriétés suffiront à faire apparaître l'icône, mais bien évidemment libre à vous de personnaliser le tout davantage !