Ajouter des icones

C’est déjà prévue, plutôt pour des plugins mais on peu en ajouter à la main :

Ajouts de fonts dans Jeedom V4

Votre dossier font doit avoir la structure suivante:

-maFont/
–style.css
–fonts/
—maFont.eot
—maFont.svg
—maFont.ttf
—maFont.woff

Les noms de fichiers fonts doivent être identique au nom du dossier

fichier style.css:

les noms des class css doivent commencer par le nom de la font puis un tiret. Ici : .maFont-

exemple:

@font-face {
	font-family: 'maFont';
	src:url('fonts/maFont.eot');
	src:url('fonts/maFont.eot') format('embedded-opentype'),
	url('fonts/maFont.woff') format('woff'),
	url('fonts/maFont.ttf') format('truetype'),
	url('fonts/maFont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="maFont-"]:before, [class*=" maFont-"]:before {
	font-family: 'maFont';
	font-style: normal;
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.maFont-heart:before {
	content: "\e000";
}

Ensuite, copiez votre dossier maFont dans var/www/html/data/fonts

Votre css sera donc:
var/www/html/data/fonts/maFont/style.css

Et les fichiers de font dans:
var/www/html/data/fonts/maFont/fonts

1 « J'aime »

Merci @kiboost pour le retour

J’ai mis à jour le plugin « icon » pour la v4 .
Dispo en bétâ.

super, merci bcp!!

salut a tous , je ne trouve pas le plugin dans le market, ou peut on le trouvers?

Il faut activer les bêta et être en V4.
Pas stable car pas compatible Jeedom V3.

Re ,

c’est déja le cas , j’arrive a entrer et activer le plugin

mais une fois dedans j’ai beau cliquer pour les installtion rien ne se passe

La prévualisation donne quoi?
Quel os?

Bonjour @kiboost
Ce petit tuto d’intégration concerne les fonts, mais comment doit on faire pour les icones svp?
Merci!

Bonsoir @ZygOm4t1k,

Je deterre ce vieux sujet afin de savoir s’il ne te serait pas possible d’inclure la font mdi (material design icons) à ton plugin.
Il y a dedans plein d’icônes qui seraient très utiles.

Par avance, merci de ton attention.

Salut kiboost,

Merci pour cette info qui est super intéressante dans la mesure ou je trouve que les icônes fournies de base sont un peu juste. Est-ce que la procédure indiquée ici est toujours valable 1 an après en V4.1.16 ? J’ajouterais bien fontawesome et/ou materialdesign…comment faire en sorte de les voir au moment ou j’attribue une icône par exemple pour une commande ?
Comment voir les icônes font_awesome5 qui sont dans 3rdparty ?
J’en profite pour te remercier pour ta précieuse et active contribution au sein de la communauté.
A+

Salut,
fontawesome est disponible si tu installes le plugin « icônes » de @ZygOm4t1k.
En revanche materialdesign, non.
Je lui ai demandé s’il pouvait l’y ajouter mais il m’a dit ne pas avoir le temps.
Il m’a également dit que si nous préparions les fichiers, il se chargerait de les inclure.
Moi, je ne sais pas faire, mais si tu sais faire, n’hésite surtout pas, je suis également intéressé.
Bonne journée

Le plugin est en beta ? (il n’est pas sur la market en stable en tous cas)
Maintenant si la proc de kiboost est encore valable on peut faire la manip avec materialdesign.

Si tu sais faire, ne te gêne surtout pas,.moi je ne sais pas.
Le plugin est en bêta pour une histoire de doc il me semble. Je l’ai installé il y a plusieurs mois, il n’y a pas de problème.
En revanche, si tu le fais, je serais preneur d’un petit tuto.
A bientôt

Salut,
J’ai appliqué la formule magique de @kiboost pour intégrer les fontes de material design (icônes en fait).

Si tu veux faire la même chose de ton coté, je te propose de suivre les étapes suivantes. Je te conseille de tout lire avant de commencer.

  1. adaptation de l’arborescence que tu as pu télécharger de material design (MaterialDesign-Webfont-master.zip).
    a. création du répertoire « materialdesignicons-webfont » sous html/data/fonts
    b. transfert du fichier materialdesignicons.css dans le nouveau répertoire et renommage en style.css
    c. changement des paths au début du fichier style.css sur les deux lignes src:. remplacement de « …/fonts » par « fonts », toute le reste restant identique dans ce fichier
    d. transfert du répertoire fonts tel quel (avec ses fichiers .eot, .ttf, .woff et .woff2
    Capture d’écran 2020-12-16 à 10.11.24
    Si tu veux pas t’embêter, tout est dans le zip dont le contenu est simplement à déposer dans html/data/fonts. Il est ici.
  2. utilisation dans un widget (V4)
    a. saisie des éléments de ton widget en référençant les nouvelles icônes. Pour trouver l’icône de tes rêves, se référer au fichier « preview.html » fourni avec la distribution et que j’ai repris dans le répertoire racine de la fonte (voir capture d’écran ci-dessus). Cette page permet de copier-coller la classe css de l’icône que tu choisis.

    J’ai un peu chargé sur les styles (opacité, couleur, taille) pour illustrer mieux les possibilités
    Capture d’écran 2020-12-16 à 10.12.24 Capture d’écran 2020-12-16 à 10.12.18

C’est vrai que ça fait un gros paquets d’icônes, tout cela gratuitement, qui complète bien l’existant avec celles du core et celles de awesome.

Enjoy !

1 « J'aime »

Super,
Je te remercie, je fais ça tout à l’heure

Bonsoir,
J’ai totalement suivi ton tuto et ça n’a pas l’air de marcher.

D’une part, il n’y a pas de visualisation des icones dans la liste mais c’est peut-être normal, d’autre part, les icones sélectionnées ne s’affichent pas. Et ce, que j’utilise la class icon ou pas.
Pour être sûr de ne pas commettre d’erreur, j’ai sélectionné ton zip que j’ai recopié directement dans le répertoire fonts.

Une idée du problème ?

Bonjour,

La différence avec moi, sur le plan de la gestion des icônes en tous cas, c’est que je n’ai pas le plugin « icône ». Il y a peut-être un conflit à ce niveau là. Il faut que tu regardes le code que tu as dans fonts et qui est j’imagine le résultat du plugin en question. Est-ce que la font « awesome » qui se trouve dans le même répertoire est structurée de la même manière ?

Avec mon niveau d’intégration il est normal que tu ne vois pas les icônes dans la liste standard, je n’ai pas souhaité pousser l’intégration jusque là pour ne pas empiéter sur jeedom core. Et une utilisation dans les widgets limite les impacts s’il y a des changements dans les versions suivantes de Jeedom.

As tu tenté d’utiliser les icones dans un widget ? par exemple <i class="fas fa-car"></i> devrait t’afficher une voiture si tu mets ce code dans la définition de ton widget.

Salut,

Pour info toutes les icones font-awesome gratuites sont déjà incluses dans Jeedom :

Oui pardon je voulais prendre un exemple avec mdi :
<i class="mdi mdi-airballoon-outline"></i>

Oui ça marche comme ça mais, sans vouloir te vexer, l’intégration n’est pas terrible. C’est un peu difficile de trouver son icone et, sans visualisation, à moins d’avoir 2 écrans, c’est compliqué.
Ça t’embêterais si je transfère tes fichiers à @ZygOm4t1k pour savoir s’il veut intégrer cette font dans son plugin ?