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 Package
y pegue todos los archivos que obtuvieron / exportaron de IcoMoon.io.
Package_Modulename
vaya a app / design / adminhtml / Magento / backend
crear carpeta con el nombre Package_Modulename / web / css / source /
Crear _module.less
archivo 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í modulename
viene 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á modulename
y agregue el nombre al li
html padre de la a
etiqueta 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.less
archivo enDirectorio. 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:
Donde deberías encontrar una línea como esta:
fuente
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.xml
archivo paraPackage_Modulename/etc/adminhtml
. Código son2) Cree el icono de fuente de ese icono .svg con la ayuda de IcoMoon.io . Más detalles Documentos
3) Crear el
default.xml
archivo paraPackage_Modulename/view/adminhtml/layout
. La codificación son:4) Cree la
fonts
carpetaPackage_Modulename/view/adminhtml/web
y pegue los archivos de iconos. Los archivos son5) Crea el
icon.css
archivo paraPackage_Modulename/view/adminhtml/web/css
. Código sonfuente
Otra forma "hackish" de hacerlo es agregar una imagen png transparente en
vendor/modulename/view/adminhtml/web/images/icon.png
y algunas líneas CSS envendor/modulename/view/adminhtml/web/css/styles.css
: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).
fuente
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.less
archivo.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.less
y complételo con el siguiente contenido:Luego, debe eliminar el
pub/static/adminhtml/Magento/backend/en_US/css/styles.css
archivo y volver a cargar la página de administraciónfuente