Magento 2: Jak mogę zmienić domyślną ikonę czcionki w menu administratora dla modułu niestandardowego?

15

Muszę dodać ikonę czcionki w menu administratora.

Jak wszystkie podstawowe menu Magento 2, domyślnie pokazuje sześciokątną ikonę niestandardowego menu modułu, jak mogę to zmienić?

magento2 adminmenu

— Taral Patoliya
źródło

24

1. Utwórz ikonę

Domyślnie magento 2 dodaje niestandardową domyślną ikonę dla twojego modułu.

Możesz jednak dodać niestandardową ikonę do menu niestandardowego modułu administratora.

Utwórz niestandardową ikonę .svg z oprogramowaniem inkscape (oprogramowanie open source dla

tworzenie wektora spróbuj człowieka!).

Utwórz ikonę czcionki dla tej ikony .svg przy pomocy IcoMoon.io

Iść do lib/web/fonts

utwórz folder modułu. przykład Packagei wklej wszystkie pliki uzyskane / wyeksportowane z IcoMoon.io.

wstrzyknął go do Magento 2 bez dotykania podstawowych plików: Załóżmy, że nazwa twojego modułu toPackage_Modulename

przejdź do app / design / adminhtml / Magento / backend

utwórz folder o nazwie Package_Modulename / web / css / source /

Utwórz _module.lessplik w folderze źródłowym

Będzie to wyglądać jak Package_Modulename/web/css/source/_module.less

Teraz w pliku _module.less dodaj następujące linie:

@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: tutaj modulenamepochodzietc/adminhtml/menu.xml

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

zobacz id Magento weź ostatnie słowo po '::' tutaj modulenamei dodaj nazwę do linadrzędnego atagu HTML, którego wynikiem jest klasaclass='item-modulename parent level-0'

Aby uzyskać więcej informacji krok po kroku, możesz znaleźć http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default -font-icon

— Praful Rajput
źródło

BTW powinien to być .lib-font-face czy .font-face?

— MagePsycho

Nie jestem pewien, jak to dla ciebie działało? co daje .font-face jest niezdefiniowanym błędem. Zamiast tego użyj .lib-font-face.

— MagePsycho

Użyłem go do wersji beta. Robię to teraz w stajnię i dam wam znać.

— Praful Rajput

to nie działa dla mnie.

— MaYaNk

Czy możesz proszę szczegółowo doradzić, z czym się tam mierzysz?

— Praful Rajput,

6

Wypróbowałem powyższe rozwiązanie, ale nie zadziałało. więc próbowałem umieścić _module.lessplik

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

Direcrtory. i to działa dla mnie.

Nie jest to zalecane, ale nie znalazłem dla tego innego rozwiązania. więc próbuję tego rozwiązania. i to działa. sprawdź następujący plik, aby upewnić się, że działa:

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

Gdzie powinieneś znaleźć taką linię:

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

— MaYaNk
źródło

1

Przeczytaj ten post, opisujemy krok po kroku, jak łatwo zmienić: uecommerce.com.br/… Dzięki

— Rafael Ortega Bueno

Folder dostawcy podlega wielu zmianom, jak tylko zrobisz łatkę bezpieczeństwa Magento, zmiana ta zniknie, jeśli użyjesz tej trasy. A jeśli użyjesz systemu wdrażania, ta zmiana nigdy się nie pojawi.

— evensis

5

Wyżej wymienione odpowiedzi są opracowywane różne foldery jak lib, design.

Więc pracowaliśmy tylko niestandardowe pliki rozszerzeń. Etapy są następujące:

1) utworzyłeś menu.xmlplik dla Package_Modulename/etc/adminhtml. Kod to

<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) Utwórz ikonę czcionki dla tej ikony .svg przy pomocy IcoMoon.io . Więcej informacji Dokumenty

3) Utwórz default.xmlplik dla Package_Modulename/view/adminhtml/layout. Kodowanie to:

<?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) Utwórz fontsfolder Package_Modulename/view/adminhtml/webi wklej pliki ikon. Pliki są

icon.eot

icon.svg

icon.ttf

icon.woff

5) Utwórz icon.cssplik dla Package_Modulename/view/adminhtml/web/css. Kod to

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

Uwaga: powyżej kodowania content: '\e900';sprawdź wartość. Sprawdź plik pakietu czcionek ( demo.html). Zobacz zrzut ekranu:

— Sankar_k
źródło

To zadziałało i jest to bardzo rozwiązanie, gdy mam sassową implementację w interfejsie i nie lubię mniej kompilować w obszarze administracyjnym.

— jruzafa

@jruzafa, powyższy komentarz nie rozumie. Proszę o komentarz jeszcze raz ze szczegółami.

— Sankar_k

0

Innym „hackish” sposobem na to jest dodanie przezroczystego obrazu png w vendor/modulename/view/adminhtml/web/images/icon.pngkilku liniach css w 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;
}

Osobiście miałem problemy z generowaniem stron internetowych i szczerze mówiąc, uważam, że takie podejście jest trochę za duże jak na ikonę administratora (obraz 1kb).

— Radu
źródło

0

Możesz także poszukać ikony administratora, która już istnieje i odpowiada twoim potrzebom w Ikonografii w Magento Admin Pattern Library, a następnie poszukaj odpowiedniej zmiennej LESS w vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lesspliku.

Jeśli znajdziesz coś przydatnego w tej bibliotece, utwórz plik LESS bezpośrednio w module (nie potrzebujesz motywu adminhtml) pod Vendor/ModuleName/view/adminhtml/web/css/source/_module.lessi wypełnij go następującą treścią:

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

Następnie musisz usunąć pub/static/adminhtml/Magento/backend/en_US/css/styles.cssplik i ponownie załadować stronę administratora

— Yonn Trimoreau
źródło