Мне нужно добавить значок шрифта в меню администратора.
Как и во всех основных меню magento 2, по умолчанию на нем отображается шестиугольная иконка для меню пользовательского модуля, как я могу его изменить?
Magento 2: Как я могу изменить значок шрифта по умолчанию в меню администратора для пользовательского модуля?
Ответы:
1. Создать иконку
По умолчанию magento 2 добавляет пользовательский значок по умолчанию для вашего модуля.
Но вы можете добавить свой собственный значок в меню пользовательского модуля администратора.
Создайте пользовательский значок .svg с помощью программного обеспечения inkscape (программа с открытым исходным кодом для
создание вектора попробуй человек!)
Создайте значок шрифта этого значка .svg с помощью IcoMoon.io
Перейти к lib/web/fonts
создайте папку вашего модуля. Пример Packageи вставьте все файлы, которые были получены / экспортированы из IcoMoon.io.
- внедрил его в 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 Раджпут
Я попробовал вышеуказанное решение, но оно не сработало для меня. поэтому я попытался положить _module.lessфайл в
vendor/magento/theme-adminhtml-backend/Your_Module/web/css/sourceDirecrtory. и это работает для меня.
Это не рекомендуется, но я не нашел другого решения для этого. поэтому я попробую это решение. и это работает. проверьте следующий файл, чтобы убедиться, что он работает:
pub/static/adminhtml/Magento/backend/en_US/css/styles.lessГде вы должны найти такую строку:
@import '../Your_Module/css/source/_module.less';
Прочитайте этот пост, мы опишем пошагово, как легко изменить: uecommerce.com.br/… Спасибо
—
Рафаэль Ортега Буэно
В папке vendor много изменений, и как только вы сделаете исправление безопасности Magento, это изменение исчезнет при использовании этого маршрута. И если вы используете систему развертывания, это изменение никогда не появится.
—
Evensis
Выше ответ разработаны различные папки , как 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). Смотрите снимок экрана:
Это сработало, и это очень хорошее решение, когда есть sass-реализация во внешнем интерфейсе, а не как компиляция в админке.
—
jruzafa
@jruzafa, выше комментарий не понимает. Пожалуйста, прокомментируйте еще раз с подробным.
—
Sankar_k
Другой «хакерский» способ сделать это - добавить прозрачное изображение 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 КБ).
Вы также можете найти значок администратора, который уже существует и соответствует вашим потребностям, внутри 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файл и перезагрузить страницу администратора