J'ai remarqué la dernière fois que j'étais sur le site Web des développeurs que le deuxième élément le plus demandé était l'importation d'icônes personnalisées dans le modeleur. De l'extérieur, il peut sembler que vous pouvez simplement ajouter une police et que cela fonctionnera. J'ai donc pensé qu'il serait utile de montrer comment faire cela avec du CSS pur, afin qu'en tant que communauté, nous puissions poser les bases pour que cela soit ajouté en tant que fonctionnalité à l'avenir Mendix versions. En comprenant comment créer vos propres icônes personnalisées, vous pouvez ajouter des icônes à beaucoup plus d'endroits que le modeleur ne permet de placer les glyphicons actuels.

Pour ajouter un ensemble d'icônes personnalisé à n'importe quel projet, il faut deux éléments principaux, une police d'icônes et un fichier CSS/Sass mappant toutes les classes.

Police de l'icône

Choisissez ou créez votre police d'icônes :

Il existe un certain nombre de polices d'icônes gratuites disponibles sur Internet. Certaines, comme Font Awesome, sont gratuites et sont des fichiers de polices presque prêts à l'emploi avec CSS inclus. Certaines ne sont que des fichiers de polices et d'autres sont des fichiers SVG ou Illustrator. Commençons par l'option la plus personnalisée : vous avez des icônes SVG que vous souhaitez utiliser dans votre projet. Pour ce faire, vous devrez créer votre propre police d'icônes sur des sites Web tels que icomoon.

Voici quelques tutoriels qui vous guident à travers les tenants et aboutissants de créer votre propre police d'icônes à partir de zéroEn créant votre propre police d'icônes, non seulement vous obtiendrez une police prête à l'emploi, mais le fichier CSS avec les classes nécessaires sera mappé pour vous.

Fichiers dont vous aurez besoin :

Une fois votre police d'icônes créée, vous devrez vous assurer que vous disposez de plusieurs types de fichiers de polices. Vous en aurez besoin pour qu'elle fonctionne avec tous les navigateurs. Par exemple, .eot fonctionne mieux avec Internet Explorer, mais .woff fonctionne mieux avec Chrome. Heureusement, vous pouvez utiliser le convertisseur de polices de Font Squirrel pour créer tous ces fichiers. Enregistrez les fichiers de polices dans un dossier à côté du dossier css pour faciliter les chemins de fichiers.

Fichier CSS/SASS et mappage de caractères

Si vous avez trouvé une police d'icônes et créé tous les fichiers de polices nécessaires, mais que vous ne l'avez pas créée dans un service comme Icomoon, l'étape suivante peut être un peu fastidieuse. C'est là que, en tant que communauté, nous pouvons nous aider les uns les autres.

Pour chaque jeu de polices d'icônes, vous devez créer chaque fichier CSS d'icônes dont nous avons besoin de 3 éléments. Pour l'exemple ci-dessous, j'utiliserai la syntaxe Sass afin qu'elle puisse être connectée à la Mendix Cadre d'interface utilisateur, et j'utiliserai les Linearicons, une police d'icônes nette.

Tout d'abord, importez vos fichiers de polices, avec @font-face. La syntaxe devrait ressembler à ceci :

@font-face {
font-family: 'Linearicons-Free';
src:url('../fonts/Linearicons-Free.eot?w118d');
src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'),
url('../fonts/Linearicons-Free.woff?w118d') format('woff'),
url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'),
url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg'); font-weight: normal;
font-style: normal;
}

Deuxièmement, créez une classe qui déclare la police que vous utilisez et définissez les styles de base comme la taille de la police, l'affichage, le positionnement, la hauteur de ligne, etc. Dans le cas de Linearicons, j'utilise la classe .lnr. Dans la majorité des cas, lorsque vous utilisez des icônes avec Mendix, vous souhaiterez que l'icône précède le texte ou le bouton et c'est la raison pour laquelle vous devez placer les propriétés sur la pseudo-classe :before. De cette façon, vous pouvez utiliser plusieurs polices d'icônes et elles ont toutes des noms de classe de dénomination uniques.

.lnr {
&:before {
display: inline-block;
font-family: 'FontAwesome';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
vertical-align: middle;
margin-right: 0;
margin-top: 0;
font-size: 1.5em;
line-height: inherit;
-moz-osx-font-smoothing: grayscale;
}
}

Enfin, vous devrez créer des noms de classe pour chaque personnage. Souvent, les polices d'icônes auront la plupart de ces noms prédéfinis. Il devrait y avoir un nom de classe pour chaque personnage.

.lnr-home:before {
content: "\e800";
}

Comme indiqué à l'étape 2, la classe de caractères est placée sur la pseudo-classe :before. Si vous souhaitez que l'icône apparaisse à droite du texte, vous pouvez créer des déclarations de classe supplémentaires pour y parvenir. Vous aurez besoin à la fois d'une déclaration de classe initiale et de tables de caractères telles que :

.lnr-a{
&:after{
…
}
}

et

.lnr-home-a:after {
content: "\e800";
}

Intégrer de nouvelles icônes dans votre projet

Une fois toutes les classes enregistrées, vous devrez enregistrer votre fichier partiel SCSS dans la structure de dossiers du framework d'interface utilisateur. Pour cet exemple, j'utilise le thème Vanilla comme structure de dossiers si vous souhaitez suivre.

1. Il est utile de l'enregistrer sous un nom spécifique, par exemple _linear-icons.scss, afin de pouvoir facilement le récupérer et le réutiliser sur d'autres projets.
2. Un partiel dans le thème > lib > dossier du projet
3. Ouvrez le fichier lib.scss dans le thème >lib
4. Au bas du fichier, ajoutez la ligne « @import folder/ linear-icons; »
5. Assurez-vous que Koala ou d'autres compilateurs Sass surveillent les fichiers afin que lorsque vous enregistrez les icônes, ils soient ajoutés à votre projet.

Utilisation d'icônes personnalisées dans le Modeler

Utiliser vos nouvelles icônes est aussi simple que d'utiliser n'importe quelle autre classe. En tant que classes CSS, vous pouvez ajouter les icônes à n'importe quel endroit possédant la propriété class dans le Modeler. Pour utiliser votre classe personnalisée, vous devez ajouter à la fois la déclaration de police de l'icône et le caractère que vous souhaitez utiliser.

J'ai inclus le CSS et les polices linearicon à télécharger, à utiliser comme modèle pour la création de vos propres ensembles de polices d'icônes.