Intégration et personnalisation des icônes avec IcoMoon

IcoMoon est la solution de référence pour la création et la gestion de bibliothèques d'icônes sur mesure. Conçu pour les intégrateurs et les designers exigeants, cet outil garantit des icônes d'une netteté absolue, dessinées sur une grille de pixels extrêmement précise.

Le choix de la performance

L'application IcoMoon permet de générer des packs d'icônes sous de multiples formats (SVG, PDF, sprites, etc.). Pour Magix CMS 4, nous avons fait le choix stratégique d'utiliser les polices d'icônes (Icon Fonts).

Cette méthode offre un double avantage :

  1. Une légèreté absolue : Vos icônes se chargent instantanément.

  2. Une flexibilité totale : Vous pouvez modifier leur taille, leur couleur ou leur ajouter des ombres en quelques lignes de CSS, exactement comme s'il s'agissait de texte.

Magix CMS vous fournit nativement un pack contenant les icônes les plus couramment utilisées pour la navigation, l'interface utilisateur et les réseaux sociaux.

L'évolution technique : Exportation en SCSS (Sass)

Avec l'arrivée de Magix CMS 4 et de son architecture front-end moderne, la gestion des icônes franchit un nouveau cap.

L'exportation et l'intégration du pack IcoMoon se font désormais de manière native en SCSS (Sass) via des directives d'importation (@import).

  • L'avantage ? Vos icônes s'intègrent parfaitement et proprement dans le flux de compilation de vos feuilles de style globales. Vous bénéficiez ainsi de la puissance des variables SCSS pour gérer vos chemins d'accès ou vos codes de caractères (content) de manière centralisée.

Comment personnaliser votre pack d'icônes ?

Vous n'êtes pas figé au pack par défaut ! Magix CMS a prévu un processus simple pour ajouter vos propres icônes ou supprimer celles que vous n'utilisez pas :

  1. Importation du projet : Récupérez le fichier de configuration global.json fourni dans les dossiers de votre thème Magix CMS.

  2. Édition en ligne : Rendez-vous sur l'application web IcoMoon App et importez ce fichier global.json. L'application rechargera exactement la sélection d'icônes actuelle de votre site.

  3. Modification : Ajoutez de nouvelles icônes depuis la vaste bibliothèque gratuite d'IcoMoon, ou importez vos propres fichiers SVG.

  4. Génération et Export : Générez votre nouvelle police, téléchargez le package, et remplacez les fichiers de police (eot, ttf, woff) ainsi que les fichiers SCSS dans votre dossier de thème. Lors de la prochaine compilation de vos styles, vos nouvelles icônes seront prêtes à être utilisées !

Configuration de icomoon

 

FAQ : icomoon

L'utilisation de polices d'icônes générées via IcoMoon offre deux avantages majeurs pour les performances et le design :

  • Une légèreté absolue : Les fichiers de police sont très légers, garantissant un chargement quasi instantané de l'interface.

  • Une flexibilité totale : Puisqu'elles sont traitées comme du texte, vous pouvez modifier leur taille, leur couleur ou leur appliquer des ombres portées avec quelques lignes de CSS, sans aucune perte de netteté.

Dans cette version 4, l'intégration franchit un cap technique en utilisant nativement le format SCSS (Sass). Les icônes sont intégrées au flux de compilation global via des directives @import. Cela permet d'exploiter toute la puissance des variables SCSS pour centraliser et gérer facilement les chemins d'accès ou les codes de caractères (content).

Oui. Le système est livré avec un pack natif contenant une sélection optimisée des icônes les plus couramment utilisées pour concevoir la navigation, l'interface utilisateur et les liens vers les réseaux sociaux.

Pas du tout, le pack d'icônes n'est pas figé. Magix CMS est pensé pour les intégrateurs et permet d'ajouter de nouvelles icônes (ou de supprimer celles que vous n'utilisez pas pour gagner encore en légèreté) de manière très simple.

La personnalisation se fait en quelques étapes via l'outil officiel IcoMoon :

  1. Importation : Récupérez le fichier global.json présent dans le dossier de votre thème Magix CMS et importez-le dans l'application web IcoMoon App. Cela rechargera instantanément votre sélection actuelle.

  2. Modification : Ajoutez de nouvelles icônes issues de la bibliothèque gratuite d'IcoMoon ou importez vos propres fichiers SVG sur-mesure.

  3. Génération : Générez la nouvelle police depuis l'interface et téléchargez le package compressé.

  4. Mise à jour : Remplacez les anciens fichiers de police (.eot, .ttf, .woff) et les fichiers SCSS dans votre dossier de thème. Il ne vous reste plus qu'à recompiler vos styles pour que les nouvelles icônes soient actives !

Haut

Nous utilisons des cookies pour vous garantir la meilleure expérience, analyser notre trafic et vous proposer des contenus adaptés. En savoir plus.