Intégration de WebFonts
Enrichissez le sélecteur d'icônes de JPlatform avec vos propres jeux d'icônes.
Les bénéfices
JPlatform propose son propre sélecteur d'icônes dans les services du tableau de bord des espaces collaboratifs, et dans tout formulaire qui embarque ce type de champ. Son jeu d'icônes n'est pas extensible. Ce module permet de l'enrichir.
- Vos icônes dans les écrans standards. Les icônes que vous ajoutez apparaissent dans le sélecteur JPlatform, au même titre que celles de l'éditeur.
- Le choix de ce qui est proposé. Vous décidez quelles icônes sont activées dans le sélecteur, plutôt que d'exposer un jeu complet.
- Rien à écrire à la main. Le module génère les propriétés à déclarer dans
custom.propou dans le fichier.propd'un module.
Les fonctionnalités
Le module s'appuie aujourd'hui sur la webfont FontAwesome. Jalios livre par défaut les webfonts Icomoon et JIcons, qui restent disponibles.
- Déposer une nouvelle webfont depuis l'administration de la plateforme
- Visualiser l'ensemble des icônes déposées avec leur code d'appel
- Choisir les icônes à activer dans le sélecteur d'icônes de la plateforme
- Générer automatiquement les propriétés à déclarer dans les fichiers
.prop - Choisir la version de Font Awesome parmi celles embarquées, ou charger un kit hébergé
- Afficher les icônes aux utilisateurs non connectés d'un site privé — la page de connexion, par exemple
- Limiter le chargement des polices au front-office, pour ne pas alourdir l'administration
Captures d'écran
Les clients aiment
Informations détaillées
Prérequis techniques
Le sélecteur d'icônes imbriqué dans un formulaire n'est disponible qu'à partir de JPlatform 10SP7. Sur une version antérieure, le module reste utilisable pour les écrans qui appellent le sélecteur en standard.
Configuration du module
Ajouter ce module via le gestionnaire de modules depuis l’administration technique et redémarrer JPlatform.
Une fois le module installé, assurez-vous que les propriétés du module sont correctement paramétrées pour votre plateforme.
Dépôt d'une nouvelle Webfont
Les WebFonts sont facilement ajoutables depuis l'interface du module. Il vous suffit de déposer le fichier Zip de votre WebFont, le module fait le reste.
Il se décline en plusieurs versions selon la version de la librairie de votre Webfont et du type de licence (les versions de la librairie sont dans la description plugin.xml du module). Selon la version, il y a des différences importantes, notamment sur la gestion des icônes (icône Font ou icônes SVG).
Il intègre en back-office, les informations de chaque Webfont (caractère et code associé).
Ce module intègre par défaut les librairies de Webfont suivantes :
- fontawesome-free-6.4.0-web
Depuis les propriétés du module, un bouton permet de choisir les icônes à déclarer dans votre plateforme et qui seront affichés dans le sélecteur d'icône.
Lorsque vous avez sélectionné les icônes souhaitées, le module générera automatiquement les propriétés à déclarer dans les fichiers de propriété (custom.prop ou fichier .prop de vos modules).
Vous pouvez déclarer ces propriétés directement en éditant chacun des fichiers de propriétés
Problématique CSS vs JS
Pour l'usage de la librairie FontAwesome PRO, il faut activer soit le CSS, soit le JS mais jamais les deux.
Nous préconisons d'activer uniquement le CSS (et donc de désactiver le JS).
De plus, pour la compatibilité avec les anciennes versions de FontAwesome, il est plus pratique de conserver les tags dans les balises <i> que les tags transformés en <svg>.
- Nom technique jcmsplugin.fonticons.fontawesome.version-selector
- Description Choisit la version de la librairie parmi celles embarquées dans le module. Le champ est un sélecteur, pas une saisie libre.
- Nom technique jcmsplugin.fonticons.fontawesome.techno
- Description js ou css, selon le mode de chargement souhaité. Pour l'usage de la librairie FontAwesome PRO, il faut activer soit le CSS, soit le JS mais jamais les deux. Nous préconisons d'activer uniquement le CSS (et donc de désactiver le JS). De plus, pour la compatibilité avec les anciennes versions de FontAwesome, il est plus pratique de conserver les tags dans les balises <i> que les tags transformés en <svg>.
- Nom technique jcmsplugin.fonticons.fontawesome.lib-list
- Description Quelles librairies Font Awesome inclure.
- Nom technique jcmsplugin.fonticons.fontawesome.kit
- Description Identifiant d'un kit hébergé par Font Awesome, à utiliser à la place des librairies embarquées. SI laissé vide, ce sont les librairies locales qui servent.
- Nom technique jcmsplugin.fonticons.fontawesome.export-iconset
- Description Donne accès, depuis l'administration, à l'écran d'export du jeu d'icônes.
- Nom technique jcmsplugin.fonticons.inFo-only.boolean
- Description N'inclut les polices que sur le site public, pas dans les écrans d'administration. Allège le back-office quand les icônes n'y servent pas.
Évolutions
- Autorisation du chargement des icônes sur site privé aux utilisateurs non connectés (ex: page de login)
Évolutions
- Interface de génération des propriétés pour personnaliser les sélecteurs d'icônes JPlatform
Évolutions
- Montée de version de la librairie fontawesome vers fontawesome-free-6.4.0-web
- Ajout de la gestion des versions fontawesome (upload/activation/suppression)
- Ajout d'un paramètre permettant de définir la liste des fonts à charger
- Possibilité de déclarer un kit fontawesome
Évolutions
- Import automatique de fontAwesome via CSS
- Ajout d'un paramètre pour charger FontAwesome en backoffice
- Ajout d'un paramètre pour charger FontAwesome au format SVG + JS
Évolution
- Migration vers FontAwesome Pro library version 5.12.0
