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 Package
und fügen Sie alle Dateien ein, die von IcoMoon.io erhalten / exportiert wurden.
Package_Modulename
Gehe zu app / design / adminhtml / Magento / backend
Erstelle einen Ordner mit dem Namen Package_Modulename / web / css / source /
_module.less
Datei 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 modulename
kommt 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 modulename
und füge den Namen zu li
html parent des a
Tags 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.less
Datei einzulegenVerzeichnis. 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:
Wo solltest du eine Zeile wie diese finden:
quelle
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.xml
Datei für erstelltPackage_Modulename/etc/adminhtml
. Code sind2) Erstellen Sie mit Hilfe von IcoMoon.io ein Schriftsymbol für dieses .svg-Symbol . Weitere Details Dokumente
3) Erstellen Sie die
default.xml
Datei fürPackage_Modulename/view/adminhtml/layout
. Codierung sind:4) Erstellen Sie den
fonts
OrdnerPackage_Modulename/view/adminhtml/web
und fügen Sie die Symboldateien ein. Dateien sind5) Erstellen Sie die
icon.css
Datei fürPackage_Modulename/view/adminhtml/web/css
. Code sindquelle
Eine andere "hackische" Möglichkeit besteht darin, ein transparentes PNG-Bild in die
vendor/modulename/view/adminhtml/web/images/icon.png
und einige CSS-Zeilen in dievendor/modulename/view/adminhtml/web/css/styles.css
folgenden Felder einzufügen :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.
quelle
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.less
Datei 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:Anschließend müssen Sie die
pub/static/adminhtml/Magento/backend/en_US/css/styles.css
Datei entfernen und die Administrationsseite neu ladenquelle