Magento 2: ฉันจะเปลี่ยนไอคอนตัวอักษรเริ่มต้นในเมนู admin สำหรับโมดูลที่กำหนดเองได้อย่างไร

15

ฉันต้องเพิ่มไอคอนตัวอักษรในเมนูผู้ดูแลระบบ

เช่นเดียวกับเมนูหลัก magento 2 โดยค่าเริ่มต้นจะแสดงไอคอนรูปหกเหลี่ยมสำหรับเมนูโมดูลที่กำหนดเองฉันจะเปลี่ยนได้อย่างไร

magento2 adminmenu

— Taral Patoliya
แหล่งที่มา

24

1. สร้างไอคอน

โดยค่าเริ่มต้น magento 2 เพิ่มไอคอนเริ่มต้นที่กำหนดเองสำหรับคุณโมดูล

แต่คุณสามารถเพิ่มไอคอนที่กำหนดเองของคุณไปยังเมนูโมดูลผู้ดูแลระบบที่กำหนดเองของคุณ

สร้างไอคอน. svg ที่กำหนดเองด้วยซอฟต์แวร์ inkscape (ซอฟต์ซอร์สสำหรับ

สร้างเวกเตอร์ลองผู้ชาย!)

สร้างไอคอนตัวอักษรของไอคอน. svg ด้วยความช่วยเหลือของ IcoMoon.io

ไปที่ lib/web/fonts

สร้างโฟลเดอร์โมดูลของคุณ ตัวอย่างPackageและวางไฟล์ทั้งหมดที่ได้รับ / ส่งออกจาก IcoMoon.io

ฉีดเข้าไปข้างในวีโอไอพี 2 โดยไม่ต้องสัมผัสไฟล์หลัก: หาก ชื่อโมดูลของคุณคือPackage_Modulename

ไปที่แอพ / ออกแบบ / adminhtml / Magento / แบ็กเอนด์

สร้างโฟลเดอร์ด้วยชื่อ 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 parent ของ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-ไอคอน

— ราชบัท
แหล่งที่มา

BTW ควรเป็น. lib-font-face หรือ. face-face หรือไม่

— MagePsycho

ฉันไม่แน่ใจว่าสิ่งนี้ทำงานให้คุณได้อย่างไร ซึ่งทำให้. ใบหน้าเป็นข้อผิดพลาดที่ไม่ได้กำหนด ใช้. lib-font-face แทน

— MagePsycho

ฉันใช้มันเป็นรุ่นเบต้า ตอนนี้ฉันกำลังทำให้มันเสถียรและแจ้งให้คุณทราบ

— Rajput อันน่ายกย่อง

มันไม่ได้ผลสำหรับฉัน

— MaYaNk

คุณช่วยแนะนำรายละเอียดได้ไหมคุณเผชิญกับสิ่งใดบ้าง?

— Rajput น่ายกย่อง

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/… ขอบคุณ

— Rafael Ortega Bueno

โฟลเดอร์ผู้จำหน่ายอาจมีการเปลี่ยนแปลงจำนวนมากทันทีที่คุณติดตั้งชุดความปลอดภัยของ Magento การเปลี่ยนแปลงนี้จะหายไปหากใช้เส้นทางนี้ และถ้าคุณใช้ระบบปรับใช้การเปลี่ยนแปลงนี้จะไม่ปรากฏขึ้น

— evensis

5

คำตอบข้างต้นที่กล่าวถึงจะทำงานโฟลเดอร์ที่แตกต่างกันเช่น,libdesign

ดังนั้นเราจึงทำงานเฉพาะไฟล์ส่วนขยายที่กำหนดเองเท่านั้น ขั้นตอนคือ:

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

โดยส่วนตัวฉันมีปัญหาในการสร้าง webfonts และบอกตามตรงฉันพบว่าวิธีนี้มีมากเกินไปสำหรับไอคอนผู้ดูแลระบบ (ภาพขนาด 1kb)

— 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ไฟล์และโหลดหน้าผู้ดูแลระบบอีกครั้ง

— Yonn Trimoreau
แหล่งที่มา