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?
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 Package
e cole todos os arquivos que foram obtidos / exportados do IcoMoon.io.
Package_Modulename
acesse app / design / adminhtml / Magento / back-end
crie uma pasta com o nome Package_Modulename / web / css / source /
Criar _module.less
arquivo 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á modulename
e adicione o nome ao li
html pai da a
tag, 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
Eu tentei a solução acima, mas não funcionou para mim. então eu tentei colocar o
_module.less
arquivoDirecrtory. 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:
Onde você deve encontrar uma linha como esta:
fonte
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.xml
arquivo paraPackage_Modulename/etc/adminhtml
. Código são2) Crie um ícone de fonte desse ícone .svg com a ajuda do IcoMoon.io . Mais detalhes Documentos
3) Crie o
default.xml
arquivo paraPackage_Modulename/view/adminhtml/layout
. Codificação são:4) Crie a
fonts
pastaPackage_Modulename/view/adminhtml/web
e cole os arquivos de ícone. Arquivos são5) Crie o
icon.css
arquivo paraPackage_Modulename/view/adminhtml/web/css
. Código sãofonte
Outra maneira "hackish" de fazer isso é adicionar uma imagem png transparente nas
vendor/modulename/view/adminhtml/web/images/icon.png
linhas e algumas linhas css novendor/modulename/view/adminhtml/web/css/styles.css
: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).
fonte
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 em
vendor/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.less
e preencha-o com o seguinte conteúdo:Em seguida, você deve remover o
pub/static/adminhtml/Magento/backend/en_US/css/styles.css
arquivo e recarregar a página de administradorfonte