Magento 2: ¿Cómo puedo cambiar el icono de fuente predeterminado en el menú admin para el módulo personalizado?

Necesito agregar el icono de fuente en el menú de administración.

Al igual que todos los menús principales de magento 2, de forma predeterminada muestra el icono hexagonal para el menú del módulo personalizado, ¿cómo puedo cambiarlo?

1. Crear icono

Por defecto, magento 2 agrega un icono predeterminado personalizado para su módulo.

Pero puede agregar su icono personalizado al menú del módulo de administración personalizado.

Cree íconos personalizados .svg con el software inkscape (software de código abierto para

creando vector ¡prueba hombre!).

Cree el icono de fuente de ese icono .svg con la ayuda de IcoMoon.io

Ir lib/web/fonts

crea tu carpeta de módulo. ejemplo Packagey pegue todos los archivos que obtuvieron / exportaron de IcoMoon.io.

2. lo inyectó dentro de Magento 2 sin tocar los archivos principales: se supone que el nombre de su módulo esPackage_Modulename

vaya a app / design / adminhtml / Magento / backend

crear carpeta con el nombre Package_Modulename / web / css / source /

Crear _module.lessarchivo en la carpeta de origen

Parecerá Package_Modulename/web/css/source/_module.less

Ahora dentro de su archivo _module.less agregue estas líneas:

@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: aquí modulenameviene deetc/adminhtml/menu.xml

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

vea la identificación Magento tome la última palabra después de '::' aquí está modulenamey agregue el nombre al lihtml padre de la aetiqueta que es el resultado de la claseclass='item-modulename parent level-0'

Para obtener más información paso a paso, puede consultar http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default -font-icon

Intenté la solución anterior pero no funcionó para mí. así que traté de poner el _module.lessarchivo en

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

Directorio. Y funciona para mi.

Esto no se recomienda, pero no encontré ninguna otra solución para esto. Entonces pruebo esta solución. y funciona. compruebe el siguiente archivo para asegurarse de que funciona:

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

Donde deberías encontrar una línea como esta:

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

Por encima de respuesta mencionados son trabajado las diferentes carpetas como lib, design.

Por lo tanto, solo hemos trabajado los archivos de extensión personalizados. Los pasos son:

1) ha creado el menu.xmlarchivo para Package_Modulename/etc/adminhtml. Código son

<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) Cree el icono de fuente de ese icono .svg con la ayuda de IcoMoon.io . Más detalles Documentos

3) Crear el default.xmlarchivo para Package_Modulename/view/adminhtml/layout. La codificación son:

<?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) Cree la fontscarpeta Package_Modulename/view/adminhtml/weby pegue los archivos de iconos. Los archivos son

icon.eot

icon.svg

icon.ttf

icon.woff

5) Crea el icon.cssarchivo para Package_Modulename/view/adminhtml/web/css. Código son

@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: La codificación anterior content: '\e900';verifica el valor. Verifique el archivo del paquete de fuente ( demo.html). Consulte la captura de pantalla:

Otra forma "hackish" de hacerlo es agregar una imagen png transparente en vendor/modulename/view/adminhtml/web/images/icon.pngy algunas líneas CSS en 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 tuve dificultades para generar las fuentes web y, para ser sincero, creo que ese enfoque es demasiado para un ícono de administrador (imagen de 1kb).

También puede buscar un icono de administrador que ya exista y que coincida con sus necesidades dentro de la Iconografía en la Biblioteca de patrones de administración de Magento y luego buscar la variable MENOS correspondiente en el vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessarchivo.

Si encuentra algo útil en esta biblioteca, cree su archivo MENOS directamente dentro de su módulo (sin necesidad de un tema adminhtml) en Vendor/ModuleName/view/adminhtml/web/css/source/_module.lessy complételo con el siguiente contenido:

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

Luego, debe eliminar el pub/static/adminhtml/Magento/backend/en_US/css/styles.cssarchivo y volver a cargar la página de administración