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

15

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?

ingrese la descripción de la imagen aquí

Taral Patoliya
fuente

Respuestas:

24

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.

  1. 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

Rajput orante
fuente
Por cierto, debería ser .lib-font-face o .font-face?
MagePsycho
No estoy seguro de cómo funcionó esto para usted? lo que da .font-face es un error indefinido. Utilice .lib-font-face en su lugar.
MagePsycho
Lo había usado en la versión beta. Lo estoy haciendo ahora en estable y les dejo saber.
Praput Rajput
No me funciona.
MaYaNk
¿Puede por favor aconsejar en detalle, qué cosa enfrenta allí?
Praful Rajput
6

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';
MaYaNk
fuente
1
Lea esta publicación, describimos en pasos cómo cambiar de una manera fácil: uecommerce.com.br/… Gracias
Rafael Ortega Bueno
La carpeta del proveedor está sujeta a muchos cambios, tan pronto como realice un parche de seguridad de Magento, este cambio desaparecerá si usa esta ruta. Y si usa un sistema de implementación, este cambio nunca aparecerá.
evensis el
5

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:

ingrese la descripción de la imagen aquí

Sankar_k
fuente
Me funcionó y es una gran solución cuando tengo una implementación sass en frontend y no me gusta compilar menos en el área de administración.
jruzafa
@jruzafa, el comentario anterior no comprende. Por favor comente una vez más con detalles.
Sankar_k
0

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).

Radu
fuente
0

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

Yonn Trimoreau
fuente