Magento 2: Como posso alterar o ícone da fonte padrão no menu admin do módulo personalizado?

15

Preciso adicionar o ícone da fonte no menu do administrador.

Como todos os menus principais do magento 2, por padrão, ele mostra o ícone hexagonal para o menu do módulo personalizado. Como posso alterá-lo?

insira a descrição da imagem aqui

magento2  adminmenu 
— Taral Patoliya
fonte

Respostas:

24

1. Ícone Criar

Por padrão, o magento 2 adiciona um ícone padrão personalizado para o seu módulo.

Mas você pode adicionar seu ícone personalizado ao menu do módulo de administração personalizado.

Crie icon .svg personalizado com o software inkscape (software livre de código aberto para

criando vector try man!).

Crie o ícone da fonte desse ícone .svg com a ajuda do IcoMoon.io

Vamos para lib/web/fonts

crie sua pasta de módulo. exemplo Packagee cole todos os arquivos que foram obtidos / exportados do IcoMoon.io.

  1. injetou no Magento 2 sem tocar nos arquivos principais: Suponha que o nome do seu módulo sejaPackage_Modulename

acesse app / design / adminhtml / Magento / back-end

crie uma pasta com o nome Package_Modulename / web / css / source /

Criar _module.lessarquivo na pasta de origem

Vai parecer Package_Modulename/web/css/source/_module.less

Agora, dentro do seu arquivo _module.less, adicione estas linhas:

@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: aqui modulenameé vem deetc/adminhtml/menu.xml

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

veja o id Magento pegue a última palavra depois de '::' aqui está modulenamee adicione o nome ao lihtml pai da atag, o resultado da classe éclass='item-modulename parent level-0'

Para obter mais informações passo a passo, consulte 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
BTW deve ser .lib-font-face ou .font-face?
— MagePsycho
Não sei como isso funcionou para você? que dá erro .font-face é indefinido. Use .lib-font-face.
— MagePsycho
Eu tinha usado na versão beta. Estou fazendo isso agora em estável e que você saiba.
— Praful Rajput 29/03/16
isso não funciona para mim.
— Mayank
Você pode, por favor, aconselhar-se em detalhes, que coisa você enfrenta lá?
— Praful Rajput
6

Eu tentei a solução acima, mas não funcionou para mim. então eu tentei colocar o _module.lessarquivo

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

Direcrtory. E funciona para mim.

Isso não é recomendado, mas não encontrei nenhuma outra solução para isso. então eu tento esta solução. e funciona. verifique o seguinte arquivo para garantir que funcione:

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

Onde você deve encontrar uma linha como esta:

@import '../Your_Module/css/source/_module.less';
— MaYaNk
fonte
11
Leia este post, descrevemos em etapas como alterar de uma maneira fácil: uecommerce.com.br/… Obrigado
— Rafael Ortega Bueno
A pasta do fornecedor está sujeita a muitas alterações, assim que você fizer um patch de segurança Magento, essa alteração desaparecerá se você usar esta rota. E se você usar um sistema de implantação, essa alteração nunca aparecerá.
— evensis 01/01/19
5

Acima de resposta referidos sejam trabalhadas as diferentes pastas como lib, design.

Portanto, trabalhamos apenas os arquivos de extensão personalizados. Os passos são:

1) você criou o menu.xmlarquivo para Package_Modulename/etc/adminhtml. Código são

<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) Crie um ícone de fonte desse ícone .svg com a ajuda do IcoMoon.io . Mais detalhes Documentos

3) Crie o default.xmlarquivo para Package_Modulename/view/adminhtml/layout. Codificação são:

<?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) Crie a fontspasta Package_Modulename/view/adminhtml/webe cole os arquivos de ícone. Arquivos são

icon.eot

icon.svg

icon.ttf

icon.woff

5) Crie o icon.css arquivo para Package_Modulename/view/adminhtml/web/css. Código são

@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: Acima da codificação, content: '\e900';verifique o valor. Por favor, verifique o arquivo do pacote da fonte ( demo.html). Consulte a captura de tela:

insira a descrição da imagem aqui

— Sankar_k
fonte
Funcionou comigo e é muito solução quando tem uma implementação sass no frontend e não gosta de compilar menos na área de administração.
— Jruzafa 29/03/19
@jruzafa, o comentário acima não entende. Por favor, comente mais uma vez com detalhes.
— 21318 Sankar_k
0

Outra maneira "hackish" de fazer isso é adicionar uma imagem png transparente nas vendor/modulename/view/adminhtml/web/images/icon.pnglinhas e algumas linhas css novendor/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;
}

Pessoalmente, tive dificuldades em gerar as fachadas da web e, para ser sincero, acho que essa abordagem é um pouco demais para um ícone de administrador (imagem de 1kb).

— Radu
fonte
0

Você também pode procurar um ícone de administrador que já exista e atender às suas necessidades dentro da Iconografia na Magento Admin Pattern Library e, em seguida, procurar a variável LESS correspondente emvendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.less arquivo.

Se você encontrar algo útil nesta biblioteca, crie seu arquivo LESS diretamente dentro do seu módulo (não há necessidade de um tema adminhtml) em Vendor/ModuleName/view/adminhtml/web/css/source/_module.lesse preencha-o com o seguinte conteúdo:

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

Em seguida, você deve remover o pub/static/adminhtml/Magento/backend/en_US/css/styles.cssarquivo e recarregar a página de administrador

— Yonn Trimoreau
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.