Мені потрібно додати значок шрифту в меню адміністратора.
Як і всі основні меню magento 2, за замовчуванням він показує шестикутну піктограму меню спеціального модуля, як я можу це змінити?
Magento 2: Як я можу змінити значок шрифту за замовчуванням у адміністраторі меню для користувальницького модуля?
Відповіді:
1. Створіть значок
За замовчуванням magento 2 додайте спеціальний значок за замовчуванням для вашого модуля.
Але ви можете додати свій власний значок у меню власного модуля адміністратора.
Створіть спеціальний значок .svg з програмним забезпеченням Inkscape (програмне забезпечення з відкритим кодом для
створення векторного спробувати людини!).
Створіть піктограму шрифту цього .svg піктограми за допомогою IcoMoon.io
Йти до lib/web/fonts
створити папку модуля. Прикладіть Packageі вставте всі файли, отримані / експортовані з IcoMoon.io.
- вводили його всередину Magento 2, не торкаючись основних файлів:
Припустимо, назва вашого модуля
Package_Modulename
перейдіть до програми / design / adminhtml / Magento / backkend
створити папку з іменем 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";
}item-modulename: тут 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 -фон-значок
BTW це має бути .lib-font-face чи .font-face?
—
MagePsycho
Я не впевнений, як це працювало на вас? що дає .font-face - невизначена помилка. Використовуйте замість .lib-font-face.
—
MagePsycho
Я використовував це в бета-версії. Я зараз роблю це в стабільний і даю вам знати.
—
Молебний Раджпут
це не працює для мене.
—
MaYaNk
Чи можете ви порадити детально поради, з якою річчю ви стикаєтесь там?
—
Похвальний Раджпут
Я спробував вище рішення, але це не спрацювало для мене. тому я спробував поставити _module.lessфайл
vendor/magento/theme-adminhtml-backend/Your_Module/web/css/sourceДиректорія. і це працює для мене.
Це не рекомендується, але я не знайшов іншого рішення для цього. тому я спробую це рішення. і це працює. перевірте наступний файл, щоб переконатися, що він працює:
pub/static/adminhtml/Magento/backend/en_US/css/styles.lessДе ви повинні знайти такий рядок:
@import '../Your_Module/css/source/_module.less';
Читайте цю публікацію, ми описуємо в кроках, як змінити простий спосіб: uecommerce.com.br/… Дякую
—
Рафаель Ортега Буено
Папка постачальника може зазнати значних змін, як тільки ви зробите патч безпеки 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 кб зображення).
Ви також можете шукати піктограму адміністратора, яка вже існує та відповідає вашим потребам всередині іконографії в бібліотеці шаблонів адміністраторів Magento, а потім шукати відповідну змінну менше vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.less.
Якщо ви знайдете щось корисне в цій бібліотеці, створіть свій файл МЕНШЕ безпосередньо у своєму модулі (немає необхідності в темі адміністратора) за адресою 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файл та перезавантажити сторінку адміністратора