Magento 2: Comment puis-je changer l'icône de police par défaut dans le menu admin pour le module personnalisé?

J'ai besoin d'ajouter une icône de police dans le menu d'administration.

Comme tous les menus principaux de magento 2, par défaut, il affiche l'icône hexagonale du menu du module personnalisé, comment puis-je le changer?

1. Créer une icône

Par défaut, magento 2 ajoute une icône par défaut personnalisée pour votre module.

Mais vous pouvez ajouter votre icône personnalisée à votre menu de module d'administration personnalisé.

Créez une icône personnalisée .svg avec le logiciel inkscape (logiciel open source pour

création de vecteur essayer l'homme!).

Créez l'icône de police de cette icône .svg avec l'aide de IcoMoon.io

Aller à lib/web/fonts

créez votre dossier de module. exemple Packageet collez tous les fichiers obtenus / exportés depuis IcoMoon.io.

2. injecté dans Magento 2 sans toucher aux fichiers de base: Supposons que le nom de votre module soitPackage_Modulename

allez dans app / design / adminhtml / Magento / backend

créer un dossier avec le nom Package_Modulename / web / css / source /

Créer un _module.lessfichier sous le dossier source

Cela ressemblera à Package_Modulename/web/css/source/_module.less

Maintenant, dans votre fichier _module.less, ajoutez ces lignes:

@modulename-icons-admin__font-name-path: '@{baseDir}fonts/modulename/icomoon';
@modulename-icons-admin__font-name : 'modulename';
.font-face(
@family-name:@modulename-icons-admin__font-name,
@font-path: @modulename-icons-admin__font-name-path,
@font-weight: normal,
@font-style: normal
);
.admin__menu .item-modulename.parent.level-0 > a:before {
  font-family: @modulename-icons-admin__font-name;
  content: "\e800";
}

item-modulename: voici modulenamevient deetc/adminhtml/menu.xml

<menu>
        <add id="Package_Modulename::modulename" title="Modulename" module="Package_Modulename" sortOrder="40" resource="Package_Modulename::modulename"/> 
</menu>

voir l'id Magento prendre le dernier mot après '::' voici modulenameet ajouter le nom au liparent html de la abalise le résultat de la classe estclass='item-modulename parent level-0'

Pour une compréhension plus détaillée, vous pouvez consulter http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default -font-icon

J'ai essayé la solution ci-dessus mais cela n'a pas fonctionné pour moi. donc j'ai essayé de mettre le _module.lessfichier

vendor/magento/theme-adminhtml-backend/Your_Module/web/css/source

Direcrtory. Et ça fonctionne pour moi.

Ce n'est pas recommandé mais je n'ai trouvé aucune autre solution pour cela. donc j'essaie cette solution. et il fonctionne. vérifiez le fichier suivant pour vous assurer qu'il fonctionne:

 pub/static/adminhtml/Magento/backend/en_US/css/styles.less

Où vous devriez trouver une ligne comme celle-ci:

@import '../Your_Module/css/source/_module.less';

Au- dessus de réponse mentionnés sont les différents dossiers travaillé comme lib, design.

Nous n'avons donc travaillé que les fichiers d'extension personnalisés. Les étapes sont les suivantes:

1) vous avez créé le menu.xmlfichier pour Package_Modulename/etc/adminhtml. Le code est

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Package_Modulename::package_menu" title="package name" module="Package_Modulename" sortOrder="70" resource="Package_Modulename::package_menu"/>
        <add id="Package_Modulename::menu_config" title="Configuration" translate="title" module="Package_Modulename" sortOrder="1" parent="Package_Modulename::package_menu" resource="Package_Modulename::menu_config"/>
    </menu>
</config>

2) Créez l'icône de police de cette icône .svg avec l'aide de IcoMoon.io . Plus de détails Documents

3) Créez le default.xmlfichier pour Package_Modulename/view/adminhtml/layout. Le codage est:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Package_Modulename::css/icon.css"/>
    </head>
</page>

4) Créez le fontsdossier Package_Modulename/view/adminhtml/webet collez les fichiers d'icônes. Les fichiers sont

icon.eot

icon.svg

icon.ttf

icon.woff

5) Créez le icon.cssfichier pour Package_Modulename/view/adminhtml/web/css. Le code est

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

.admin__menu .level-0.item-package_menu > a::before {
    content: '\e900';
    font-size: 3.0rem;
    padding-top: 0.1rem;
    font-family:'Packagename';
}

Remarque: au-dessus du codage, content: '\e900';vérifiez la valeur. Veuillez vérifier le fichier du package de polices ( demo.html). Reportez-vous à la capture d'écran:

Une autre façon "hackish" de le faire est d'ajouter une image png transparente dans le vendor/modulename/view/adminhtml/web/images/icon.pnget quelques lignes css dans le vendor/modulename/view/adminhtml/web/css/styles.css:

/* you may have to adjust the selector a bit*/
.admin__menu .item-{modulename}-menu.last.level-0 > a:before {
    background: url("../images/icon.png") center center no-repeat;
    content: "";
    background-size: auto 95%;
}

.admin__data-grid-wrap .data-grid .data-grid-draggable .data-row .data-grid-thumbnail-cell .admin__control-thumbnail > img:before {
    border:none;
}

Personnellement, j'ai eu des difficultés à générer les polices Web et pour être honnête, je trouve cette approche un peu trop pour une icône d'administration (image de 1 Ko).

Vous pouvez également rechercher une icône d'administration qui existe déjà et correspond à vos besoins dans l' iconographie dans la bibliothèque de modèles d'administration Magento , puis rechercher la variable LESS correspondante dans le vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessfichier.

Si vous trouvez quelque chose d'utile dans cette bibliothèque, créez votre fichier LESS directement dans votre module (pas besoin de thème adminhtml) sur Vendor/ModuleName/view/adminhtml/web/css/source/_module.lesset remplissez-le avec le contenu suivant:

.admin__menu .item-modulename.parent.level-0 > a:before {
  content: @icon-tool__content; // Or whatever icon variable you want
}

Ensuite, vous devez supprimer le pub/static/adminhtml/Magento/backend/en_US/css/styles.cssfichier et recharger la page d'administration