Magento 2: Come posso cambiare l'icona del font predefinito nel menu admin per il modulo personalizzato?

15

Devo aggiungere l'icona del carattere nel menu di amministrazione.

Come tutti i menu core di magento 2, per impostazione predefinita mostra l'icona esagonale per il menu del modulo personalizzato, come posso cambiarlo?

magento2 adminmenu

— Taral Patoliya
fonte

24

1. Crea icona

Di default magento 2 aggiungi un'icona predefinita personalizzata per il tuo modulo.

Ma puoi aggiungere l'icona personalizzata al menu del modulo di amministrazione personalizzato.

Crea un'icona personalizzata .svg con il software inkscape (software open source per

creazione vettoriale prova uomo!).

Crea l'icona del carattere di quell'icona .svg con l'aiuto di IcoMoon.io

Vai a lib/web/fonts

crea la tua cartella del modulo. esempio Packagee incolla tutti i file ottenuti / esportati da IcoMoon.io.

iniettato all'interno di Magento 2 senza toccare i file principali: supponiamo che il nome del modulo siaPackage_Modulename

vai su app / design / adminhtml / Magento / backend

crea una cartella con nome Package_Modulename / web / css / source /

Crea _module.lessfile nella cartella di origine

Sembrerà Package_Modulename/web/css/source/_module.less

Ora all'interno del tuo file _module.less aggiungi queste righe:

@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: ecco che modulenamevieneetc/adminhtml/menu.xml

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

vedi l'id Magento prendi l'ultima parola dopo '::' qui modulenamee aggiungi il nome al ligenitore htmla tag tag il risultato della classe èclass='item-modulename parent level-0'

Per ulteriori informazioni dettagliate, consultare http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default -font-icon

— Praful Rajput
fonte

A proposito, dovrebbe essere .lib-font-face o .font-face?

— MagoPsycho

Non sono sicuro di come abbia funzionato per te? che dà .font-face è un errore indefinito. Utilizzare invece .lib-font-face.

— MagoPsycho

L'avevo usato in versione beta. Lo sto facendo ora in stable e ti faccio sapere.

— Praful Rajput,

non funziona per me.

— MaYaNk,

Puoi per favore consigliarti nei dettagli, che cosa affronti lì?

— Praful Rajput,

6

Ho provato sopra la soluzione ma non ha funzionato per me. così ho provato a inserire il _module.lessfile

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

Direcrtory. e funziona per me.

Questo non è raccomandato ma non ho trovato altra soluzione per questo. quindi provo questa soluzione. e funziona. controlla il seguente file per assicurarti che funzioni:

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

Dove dovresti trovare una linea come questa:

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

— Mayank
fonte

1

Leggi questo post, descriviamo in pochi passaggi come cambiare in modo semplice: uecommerce.com.br/… Grazie

— Rafael Ortega Bueno

La cartella del fornitore è soggetta a molte modifiche, non appena si esegue una patch di sicurezza Magento, questa modifica svanirà se si utilizza questa route. E se si utilizza un sistema di distribuzione, questa modifica non verrà mai visualizzata.

— Evensis,

5

Sopra risposta menzionati sono lavorato diverse cartelle come lib, design.

Quindi abbiamo lavorato solo con i file di estensione personalizzati. I passaggi sono:

1) hai creato il menu.xmlfile per Package_Modulename/etc/adminhtml. I codici sono

<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) Crea l'icona del carattere di quell'icona .svg con l'aiuto di IcoMoon.io . Maggiori dettagli Documenti

3) Creare il default.xmlfile per Package_Modulename/view/adminhtml/layout. I codici sono:

<?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) Creare la fontscartella Package_Modulename/view/adminhtml/webe incollare i file delle icone. I file sono

icon.eot

icon.svg

icon.ttf

icon.woff

5) Creare il icon.cssfile per Package_Modulename/view/adminhtml/web/css. I codici sono

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

Nota: sopra la codifica content: '\e900';controllare il valore. Controllare il file del pacchetto di caratteri ( demo.html). Fare riferimento alla schermata:

— Sankar_k
fonte

Mi ha funzionato ed è un'ottima soluzione quando si ha un'importante implementazione in frontend e non si compila meno nell'area di amministrazione.

— jruzafa,

@jruzafa, il commento sopra non capisce. Per favore commenta ancora una volta con dettagli.

— Sankar_k,

0

Un altro modo "hackish" per farlo è quello di aggiungere un'immagine png trasparente nella vendor/modulename/view/adminhtml/web/images/icon.pnge alcune righe css nella 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;
}

Personalmente ho avuto difficoltà a generare i caratteri web e ad essere sincero trovo che un approccio un po 'troppo per un'icona di amministrazione (immagine da 1kb).

— Radu
fonte

0

Puoi anche cercare un'icona dell'amministratore che esiste già e soddisfa le tue esigenze all'interno dell'iconografia nella libreria dei pattern di amministrazione di Magento e quindi cercare la variabile LESS corrispondente nel vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessfile.

Se trovi qualcosa di utile in questa libreria, crea il tuo file LESS direttamente all'interno del modulo (non è necessario un tema adminhtml) Vendor/ModuleName/view/adminhtml/web/css/source/_module.lesse riempilo con il seguente contenuto:

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

Quindi, è necessario rimuovere il pub/static/adminhtml/Magento/backend/en_US/css/styles.cssfile e ricaricare la pagina di amministrazione

— Yonn Trimoreau
fonte