Estás leyendo la publicación: Cómo cambiar el ícono predeterminado para los elementos del menú en el backend de Magento 2
La plataforma Magento 2 permite a los desarrolladores desarrollar y agregar módulos personalizados en la tienda para aprovechar la funcionalidad extendida, ya sea para mejorar la experiencia del cliente o facilitar la tarea de administración. Se puede acceder a estos módulos personalizados desde el panel de administración de Magento 2.
Ahora, a estos módulos personalizados se les asigna el ícono “hexagonal” de forma predeterminada, como se muestra en la imagen a continuación:
Sin embargo, puedes cambiar el icono predeterminado para los elementos del menú en el backend de Magento 2 y la publicación da el método programático para el mismo.
¿Por qué lo harías?
Las razones para cambiar el icono predeterminado en el menú de un módulo personalizado en el backend de Magento 2 son:
- ¡La representación simbólica para reflejar la funcionalidad siempre es algo bueno!
- Branding con el icono personalizado de tu empresa
- Los compañeros administradores o el propietario de la tienda pueden obtener una descripción general del módulo con un ícono personalizado y entenderlo fácilmente.
- Diferenciar los módulos personalizados de los predeterminados
- Apariencia visual única y fresca con un atractivo atractivo.
Debido a las razones anteriores, puede esforzarse por seguir el siguiente método para personalizar los íconos de los elementos del menú para módulos personalizados en el panel de administración de Magento 2:
Método para cambiar el ícono predeterminado para los elementos del menú en el backend de Magento 2:
- Crear Menú app/code/Meetanshi/HelloWorld/etc/adminhtml/menu.xml
< /menú> - Crear app/code/Meetanshi/HelloWorld/view/adminhtml/web/css/helloworld.css archivo con el siguiente código
.admin__menu .level-0.item-helloworld > a:before { content: url(‘../images/meetanshi.svg’); altura: 28px; margen: 0 automático; ancho: 30px; }
.admin__menu .level-0.item-helloworld > a:antes {
contenido: url(‘../images/meetanshi.svg’);
altura: 28px;
margen: 0 automático;
ancho: 30px;
}
- Sube tu icono a aplicación/código/Meetanshi/HelloWorld/view/adminhtml/web/images/
- Crear app/code/Meetanshi/HelloWorld/view/adminhtml/layout/default.xml archivo con el siguiente código
- Ejecutar los siguientes comandos
configuración de php bin/magento: contenido estático: implementar -f –area adminhtml php bin/magento caché: limpiar
configuración de php bin/magento: contenido estático: implementar -f –area adminhtml
php bin/caché de magento: limpiar
Eso es todo.
El icono del elemento de menú personalizado en el backend:
Siéntase libre de hacer cualquier duda en la sección de Comentarios a continuación y estaré encantado de ayudar.
Comparta la solución anterior con tantos desarrolladores como sea posible a través de las plataformas de redes sociales.
Gracias.
