Magento 2: Wie kann ich das Standardschriftart-Symbol im Menü admin für ein benutzerdefiniertes Modul ändern?

Ich muss das Schriftart-Symbol im Admin-Menü hinzufügen.

Wie bei allen Hauptmenüs von Magento 2 wird standardmäßig das sechseckige Symbol für das benutzerdefinierte Modulmenü angezeigt. Wie kann ich es ändern?

1. Icon erstellen

Standardmäßig fügt Magento 2 ein benutzerdefiniertes Standardsymbol für Ihr Modul hinzu.

Sie können Ihr benutzerdefiniertes Symbol jedoch zu Ihrem benutzerdefinierten Admin-Modul-Menü hinzufügen.

Erstellen Sie ein benutzerdefiniertes Icon .svg mit der inkscape Software (Open Source Software für

Erstellen von Vektor versuchen Mann!).

Erstellen Sie mithilfe von IcoMoon.io ein Schriftsymbol für dieses .svg-Symbol

Gehe zu lib/web/fonts

Erstellen Sie Ihren Modulordner. Beispiel Packageund fügen Sie alle Dateien ein, die von IcoMoon.io erhalten / exportiert wurden.

2. injiziert es in Magento 2, ohne die Kerndateien zu berühren: Angenommen, Ihr Modulname istPackage_Modulename

Gehe zu app / design / adminhtml / Magento / backend

Erstelle einen Ordner mit dem Namen Package_Modulename / web / css / source /

_module.lessDatei im Quellordner erstellen

Es wird so scheinen Package_Modulename/web/css/source/_module.less

Fügen Sie nun in Ihrer Datei _module.less die folgenden Zeilen hinzu:

@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: hier modulenamekommt herkommtetc/adminhtml/menu.xml

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

siehe die id Magento nehme das letzte Wort nach '::' hier ist modulenameund füge den Namen zu lihtml parent des aTags hinzu, das das Klassenergebnis istclass='item-modulename parent level-0'

Weitere Informationen zum schrittweisen Verständnis finden Sie unter http://ibnab.com/de/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default -Schriftart-Symbol

Ich habe die obige Lösung ausprobiert, aber es hat bei mir nicht funktioniert. Also habe ich versucht, die _module.lessDatei einzulegen

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

Verzeichnis. und es funktioniert bei mir.

Dies wird nicht empfohlen, aber ich habe keine andere Lösung dafür gefunden. Also versuche ich diese Lösung. und es funktioniert. Überprüfen Sie die folgende Datei, um sicherzustellen, dass sie funktioniert:

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

Wo solltest du eine Zeile wie diese finden:

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

Oben genannte Antwort werden die verschiedenen Ordner wie gearbeitet lib, design.

Wir haben also nur die benutzerdefinierten Erweiterungsdateien bearbeitet. Die Schritte sind:

1) Sie haben die menu.xmlDatei für erstellt Package_Modulename/etc/adminhtml. Code sind

<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) Erstellen Sie mit Hilfe von IcoMoon.io ein Schriftsymbol für dieses .svg-Symbol . Weitere Details Dokumente

3) Erstellen Sie die default.xmlDatei für Package_Modulename/view/adminhtml/layout. Codierung sind:

<?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) Erstellen Sie den fontsOrdner Package_Modulename/view/adminhtml/webund fügen Sie die Symboldateien ein. Dateien sind

icon.eot

icon.svg

icon.ttf

icon.woff

5) Erstellen Sie die icon.cssDatei für Package_Modulename/view/adminhtml/web/css. Code sind

@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';
}

Hinweis: content: '\e900';Überprüfen Sie den Wert über der Kodierung . Bitte überprüfen Sie die Schriftpaketdatei ( demo.html). Siehe den Screenshot:

Eine andere "hackische" Möglichkeit besteht darin, ein transparentes PNG-Bild in die vendor/modulename/view/adminhtml/web/images/icon.pngund einige CSS-Zeilen in die vendor/modulename/view/adminhtml/web/css/styles.cssfolgenden Felder einzufügen :

/* 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;
}

Ich persönlich hatte Schwierigkeiten, die Webfonts zu generieren, und um ehrlich zu sein, finde ich diesen Ansatz für ein Admin-Icon (1kb Bild) etwas zu viel.

Sie können auch in der Magento Admin Pattern Library nach einem Admin-Symbol suchen, das bereits vorhanden ist und Ihren Anforderungen entspricht, und dann in der vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessDatei nach der entsprechenden LESS-Variablen suchen .

Wenn Sie in dieser Bibliothek etwas Nützliches finden, erstellen Sie Ihre LESS-Datei direkt in Ihrem Modul (kein Admin-HTML-Theme erforderlich) unter Vendor/ModuleName/view/adminhtml/web/css/source/_module.less und füllen Sie sie mit folgendem Inhalt:

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

Anschließend müssen Sie die pub/static/adminhtml/Magento/backend/en_US/css/styles.cssDatei entfernen und die Administrationsseite neu laden