Illustrations

Bonjour, J’ai téléchargé plusieurs types d’icônes dans :
html/data/fonts/…

Je crée ensuite des widgets pour y accéder.

Le problème est que je ne peux pas y accéder à partir des illustrations, seulement à travers la tag html.

Est-il possible de modifier Jeedom pour qu’il soit visible dans les illustrations, ce qui faciliterait leur choix.

Desolé mais je comprends pas le souci

Tu as téléchargé des icones. Ok
Tu crees un widget pour y acceder ? Acceder a quoi?

Un widget accede a rien. Il doit etre appliqué à une commande ?

Acceder a quoi ? Depuis ou ?

Desolé mais ton souci est franchement pas clair du tout.

Donc demander de modifier jeedom direct pour une explication aussi alambiquée… :thinking::thinking:

Bonjour,

J’avoue que j’ai relis plusieurs fois pour comprendre, mais j’ai fini par saisir ton problème.

Pour rajouter un pack d’icones perso il y a une procédure a respecter, voici un post qui peut t’aider :

Ou

Jai beau relire… desole mais je comprends pas.
Bravo davoir reussi a decoder !

Salut,

En complément de la réponse de @Phpvarious, tu as un exemple ici avec les icônes material design :

Et ici avec les icônes Kiko qui ont finalement directement été intégrées au core :

une image vaut mieux que mille mots

J’ai ajouté de nouvelles sources à Jeedom

Je peux y accéder par le biais d’un widget

Mais je n’arrive pas à les rendre accessibles dans les illustrations.

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

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

ont peut voir le contenu ( les 50 premières lignes par exemple) de ton fichier style.css

bien sûr

@font-face {
  font-family: 'cpb';
  src:  url('fonts/cpb.eot?na013x');
  src:  url('fonts/cpb.eot?na013x#iefix') format('embedded-opentype'),
    url('fonts/cpb.ttf?na013x') format('truetype'),
    url('fonts/cpb.woff?na013x') format('woff'),
    url('fonts/cpb.svg?na013x#cpb') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'cpb' !important;
  speak: never;
  font-style: normal;
  font-size: 64px;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-solar_red .path1:before {
  content: "\e902";
  color: rgb(244, 178, 176);
}
.icon-solar_red .path2:before {
  content: "\e903";
  margin-left: -1em;
  color: rgb(244, 178, 176);
}
.icon-solar_red .path3:before {
  content: "\e904";
  margin-left: -1em;
  color: rgb(179, 64, 74);
}
.icon-solar_red .path4:before {
  content: "\e905";
  margin-left: -1em;
  color: rgb(179, 64, 74);
}
.icon-solar_red .path5:before {
  content: "\e906";
  margin-left: -1em;
  color: rgb(179, 64, 74);
}

Et comment on été généré les fichiers dans le fonts ?

Je connait pas trop ce domaine, mais il semble qu’il soient mal encodé pour le core.

1er test a faire :

remplace [class^="icon-"], [class*=" icon-"] par [class^="cpb-"], [class*=" cpb-"]
et de même si les 1er icone pour le test (.cpb-solar_red .path1:before)
Vide le cache du navigateur et test la modale de selection d’icones.

2ème test a faire :

Test en remplacant le nom de dossier `cpb` par `icon` Ensuite renomme tous les fichier dans le fonts en `icon.eot` ...

Puis dans le style.css :

@font-face {
  font-family: 'cpb';
  src:  url('fonts/icon.eot?na013x');
  src:  url('fonts/icon.eot?na013x#iefix') format('embedded-opentype'),
    url('fonts/icon.ttf?na013x') format('truetype'),
    url('fonts/icon.woff?na013x') format('woff'),
    url('fonts/icon.svg?na013x#cpb') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Vide le cache du navigateur et test la modale de selection d’icones.

Bonjour Phpvarious, la deuxième option fonctionne avec les Fonts monochromatiques.

J’utilise l’application icomoon pour transformer n’importe quel SVG en Font

Des trois icônes, seule l’icône monochrome noire fonctionne correctement.

Phpvarious, merci beaucoup pour vos conseils. Ouvrez la porte à mon imagination

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.