Mes propres Font dans le menu F$B33 de Noodom

[OUARZA]

Bonjour à tous,
J’utilise l’excellent menu F$B33 de @noodom.
Dans le JSON j’ai indiqué des icônes Font que j’ai intégré moi-même à l’aide de ce tuto: https://youdom.net/2021/01/01/ajouter-des-icones-dans-jeedom/

Le problème c’est qu’ils ont une taille étrange.
Voici quelques tests :
JSON:

        {
            "link": "12",
            "icon": "data/menusNoodom/menuJsonFsb33Frame/img/icon_plantes.png"
        },
        {
            "link": "27",
            "icon": "icon icon-4x mafont-tank-water"
        }

Résultat:

JSON:

        {
            "link": "27",
            "icon": "mafont-4x mafont-tank-water"
        },
        {
            "link": "27",
            "icon": "mafont-4x mafont-tank-water"
        },
       {
            "link": "27",
            "icon": "mafont-4x mafont-tank-water"
        }

Résultat:

JSON:

        {
            "link": "27",
            "icon": "icon animal-rabbit"
        },
        {
            "link": "27",
            "icon": "mafont-4x mafont-tank-water"
        }

Résultat:

Merci pour votre éclairage.
Mathieu

[OUARZA]

Bonjour,
En ajoutant la taille dans l’outil de développement, cela fonctionne.

On dirait qu’une classe prend le dessus sur l’autre.

Comment y remédier ?
Merci

[Phpvarious]

Bonjour,
Pour la partie décalage, c’est lié aussi a la taille (font-size) de l’icone.
Ta class .mafont… hérite de la class css ul.monmenu dont le font-size est défini a 16px ce qui a pour effet de réduire la div qui est censé contenir une image de 50px de haut.
Pour y remédier, tu peut ajouter dans le perso.css :

li.monmenu i {
  font-size: 50px;
  vertical-align: middle;
}

Bonne journée.

[OUARZA]

Hello @Phpvarious ,
J’ai ajouté les lignes dans mon perso.css, mais pas mieux

Mathieu

[Phpvarious]

Bonjour, on voit clairement que le font-size n’est pas appliqué, il faudrait voir pourquoi avec la console de développement. Tu as peut-être déja fait une modif dans le perso.css qui vient en contradiction avec cette class css, tu peut tenter un font-size: 50px !important; dans le css et ne mettre que mafont-circle-check dans le perso.json.

[OUARZA]

Hello @Phpvarious ,
J’ai honte… c’était une histoire de cache…

Le problème est réglé.
Merci encore à toi.
Mathieu

[OUARZA]

Le résultat :