Magento 2: Как я могу изменить значок шрифта по умолчанию в меню администратора для пользовательского модуля?

15

Мне нужно добавить значок шрифта в меню администратора.

Как и во всех основных меню magento 2, по умолчанию на нем отображается шестиугольная иконка для меню пользовательского модуля, как я могу его изменить?

введите описание изображения здесь

magento2 adminmenu Тарал Патолия
источник

Ответы:

24

1. Создать иконку

По умолчанию magento 2 добавляет пользовательский значок по умолчанию для вашего модуля.

Но вы можете добавить свой собственный значок в меню пользовательского модуля администратора.

Создайте пользовательский значок .svg с помощью программного обеспечения inkscape (программа с открытым исходным кодом для

создание вектора попробуй человек!)

Создайте значок шрифта этого значка .svg с помощью IcoMoon.io

Перейти к lib/web/fonts

создайте папку вашего модуля. Пример Packageи вставьте все файлы, которые были получены / экспортированы из IcoMoon.io.

  1. внедрил его в Magento 2, не трогая файлы ядра: Предположим, имя вашего модуляPackage_Modulename

перейти к app / design / adminhtml / Magento / backend

создать папку с именем Package_Modulename / web / css / source /

Создать _module.lessфайл в исходной папке

Будет казаться Package_Modulename/web/css/source/_module.less

Теперь внутри вашего файла _module.less добавьте следующие строки:

@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";
}

Товар-по модулю: вот modulenameродомetc/adminhtml/menu.xml

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

посмотрите id Magento, возьмите последнее слово после '::' здесь modulenameи добавьте имя в lihtml родительский aтег для результата классаclass='item-modulename parent level-0'

Для более детального понимания вы можете обратиться по ссылке http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default -font-значок

Прафул Раджпут
источник
Кстати, это должно быть .lib-font-face или .font-face?
MagePsycho
Я не уверен, как это работает для вас? который дает .font-face является неопределенной ошибкой. Вместо этого используйте .lib-font-face.
MagePsycho
Я использовал его в бета-версии. Я делаю это сейчас в конюшню и дам вам знать.
Praful Раджпут
это не работает для меня.
MaYaNk
Подскажите, пожалуйста, подробно, с чем вы там сталкиваетесь?
Praful Раджпут
6

Я попробовал вышеуказанное решение, но оно не сработало для меня. поэтому я попытался положить _module.lessфайл в

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

Direcrtory. и это работает для меня.

Это не рекомендуется, но я не нашел другого решения для этого. поэтому я попробую это решение. и это работает. проверьте следующий файл, чтобы убедиться, что он работает:

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

Где вы должны найти такую ​​строку:

@import '../Your_Module/css/source/_module.less';
Mayank
источник
1
Прочитайте этот пост, мы опишем пошагово, как легко изменить: uecommerce.com.br/… Спасибо
Рафаэль Ортега Буэно
В папке vendor много изменений, и как только вы сделаете исправление безопасности Magento, это изменение исчезнет при использовании этого маршрута. И если вы используете систему развертывания, это изменение никогда не появится.
Evensis
5

Выше ответ разработаны различные папки , как lib, design.

Поэтому мы работали только с файлами пользовательских расширений. Шаг являются:

1) у вас есть menu.xmlфайл для Package_Modulename/etc/adminhtml. Кодекс

<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) Создайте значок шрифта этого значка .svg с помощью IcoMoon.io . Подробнее документы

3) Создайте default.xmlфайл для Package_Modulename/view/adminhtml/layout. Кодирование это:

<?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) Создайте fontsпапку Package_Modulename/view/adminhtml/webи вставьте файлы значков. Файлы

icon.eot

icon.svg

icon.ttf

icon.woff

5) Создайте icon.cssфайл для Package_Modulename/view/adminhtml/web/css. Кодекс

@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';
}

Примечание: выше кодировки content: '\e900';проверьте значение. Пожалуйста, проверьте файл пакета шрифтов ( demo.html). Смотрите снимок экрана:

введите описание изображения здесь

Sankar_k
источник
Это сработало, и это очень хорошее решение, когда есть sass-реализация во внешнем интерфейсе, а не как компиляция в админке.
jruzafa
@jruzafa, выше комментарий не понимает. Пожалуйста, прокомментируйте еще раз с подробным.
Sankar_k
0

Другой «хакерский» способ сделать это - добавить прозрачное изображение PNG в vendor/modulename/view/adminhtml/web/images/icon.pngи несколько строк CSS в 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;
}

Лично у меня были трудности с генерацией веб-шрифтов, и, честно говоря, я считаю, что этот подход слишком сложен для значка администратора (изображение 1 КБ).

Radu
источник
0

Вы также можете найти значок администратора, который уже существует и соответствует вашим потребностям, внутри Iconography в Magento Admin Pattern Library, а затем найти соответствующую переменную LESS в vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessфайле.

Если вы найдете что-то полезное в этой библиотеке, создайте свой файл LESS непосредственно внутри вашего модуля (без необходимости в теме adminhtml) Vendor/ModuleName/view/adminhtml/web/css/source/_module.lessи заполните его следующим содержимым:

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

Затем вы должны удалить pub/static/adminhtml/Magento/backend/en_US/css/styles.cssфайл и перезагрузить страницу администратора

Йонн Триморо
источник