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

15

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?

Bildbeschreibung hier eingeben

Taral Patoliya
quelle

Antworten:

24

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.

  1. 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

Praful Rajput
quelle
Übrigens sollte es .lib-font-face oder .font-face sein?
MagePsycho
Ich bin mir nicht sicher, wie das bei Ihnen funktioniert hat? was .font-face gibt ist undefinierter fehler. Verwenden Sie stattdessen .lib-font-face.
MagePsycho
Ich hatte es in der Beta-Version verwendet. Ich mache es jetzt in Stall und lass es dich wissen.
Praful Rajput
es funktioniert bei mir nicht.
MaYaNk
Können Sie uns bitte ausführlich beraten, mit welcher Sache Sie dort konfrontiert sind?
Praful Rajput
6

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';
MaYaNk
quelle
1
Lesen Sie diesen Beitrag, wir beschreiben in Schritten, wie Sie auf einfache Weise Änderungen vornehmen können: uecommerce.com.br/… Danke
Rafael Ortega Bueno
Der Herstellerordner unterliegt einer Vielzahl von Änderungen. Sobald Sie einen Magento-Sicherheitspatch ausführen, wird diese Änderung auf dieser Route nicht mehr angezeigt. Wenn Sie ein Bereitstellungssystem verwenden, wird diese Änderung niemals angezeigt.
Evensis
5

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:

Bildbeschreibung hier eingeben

Sankar_k
quelle
Es hat mir geholfen und es ist eine sehr gute Lösung, wenn man eine Sass-Implementierung im Frontend hat und nicht weniger im Admin-Bereich kompilieren möchte.
Jruzafa
@ jruzafa, Der obige Kommentar versteht nicht. Bitte kommentieren Sie noch einmal mit detailliert.
Sankar_k
0

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.

Radu
quelle
0

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

Yonn Trimoreau
quelle