Magento 2: मैं कस्टम मॉड्यूल के लिए मेनू व्यवस्थापक में डिफ़ॉल्ट फ़ॉन्ट आइकन कैसे बदल सकता हूं?

Question

मुझे व्यवस्थापक मेनू में फ़ॉन्ट आइकन जोड़ने की आवश्यकता है।

सभी मुख्य Magento 2 मेनू की तरह, डिफ़ॉल्ट रूप से यह कस्टम मॉड्यूल मेनू के लिए हेक्सागोनल आइकन दिखाता है, मैं इसे कैसे बदल सकता हूं?

Answer 1

1. आइकॉन बनाएं

डिफ़ॉल्ट Magento 2 द्वारा आप मॉड्यूल के लिए कस्टम डिफ़ॉल्ट आइकन जोड़ें।

लेकिन आप अपने कस्टम आइकन को अपने कस्टम व्यवस्थापक मॉड्यूल मेनू में जोड़ सकते हैं।

कस्टम आइकन .svg inkscape सॉफ़्टवेयर के लिए बनाएं (ओपन सोर्स सॉफ्ट फॉर

वेक्टर बनाने की कोशिश आदमी!)।

IcoMoon.io की मदद से उस .svg आइकन का फ़ॉन्ट आइकन बनाएं

के लिए जाओ lib/web/fonts

अपना मॉड्यूल फ़ोल्डर बनाएँ। उदाहरण Packageऔर IcoMoon.io से प्राप्त / निर्यात की गई सभी फ़ाइलों को पेस्ट करें।

2. कोर फ़ाइलों को छूने के बिना इसे Magento 2 के अंदर इंजेक्ट किया गया: माना जाता है कि आपका मॉड्यूल नाम हैPackage_Modulename

app / design / adminhtml / Magento / backend पर जाएं

पैकेज_मॉडलनेम / वेब / सीएसएस / स्रोत / नाम के साथ फ़ोल्डर बनाएँ

_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: यहाँ modulenameसे आता हैetc/adminhtml/menu.xml

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

देखिए कि मैगेंटो '::' के बाद अंतिम शब्द लेता है modulenameऔर कक्षा के परिणाम liके aटैग के html माता-पिता का नाम इसमें जोड़ देता है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-bffault संदर्भित कर सकते हैं -font आइकन

Comments

BTW यह होना चाहिए .लिब-फ़ॉन्ट-चेहरा या .font- चेहरा?

— माजेप्सिको 12

मुझे यकीन नहीं है कि यह आपके लिए कैसे काम करता है? जो देता है .font- चेहरा अपरिभाषित त्रुटि है। इसके बजाय .lib-font-face का उपयोग करें।

— मगेप्सिचिको

मैंने इसे बीटा वर्जन में इस्तेमाल किया था। मैं इसे अब स्थिर कर रहा हूं और आपको बताता हूं।

— प्रफुल्ल राजपूत

यह मेरे लिए काम नहीं कर रहा है।

— मयंक

क्या आप विस्तार से सलाह दे सकते हैं, आप किस चीज का सामना करते हैं?

— प्रफुल्ल राजपूत

Answer 2

मैंने उपरोक्त समाधान की कोशिश की लेकिन यह मेरे लिए काम नहीं किया। इसलिए मैंने _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';

Comments

इस पोस्ट को पढ़ें, हम चरणों में वर्णन करते हैं कि कैसे एक आसान तरीके से बदलना है: uecommerce.com.br/… धन्यवाद

— राफेल ऑर्टेगा ब्यूनो

विक्रेता फ़ोल्डर बहुत परिवर्तन के अधीन है, जैसे ही आप एक Magento सुरक्षा पैच करते हैं, यह परिवर्तन इस मार्ग का उपयोग करते समय गायब हो जाएगा। और यदि आप एक परिनियोजन प्रणाली का उपयोग करते हैं, तो यह परिवर्तन कभी नहीं दिखाई देगा।

— evensis

Answer 3

उपर्युक्त उत्तर को विभिन्न फ़ोल्डरों की तरह काम किया जाता है 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) IcoMoon.io की मदद से उस .svg आइकन का फ़ॉन्ट आइकन बनाएं । अधिक विवरण दस्तावेज़

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) देखें। स्क्रीन शॉट देखें:

Comments

इसने मुझे काम किया और यह बहुत ही उपयोगी है जब फ्रंटएंड में एक sass कार्यान्वयन हो और व्यवस्थापक क्षेत्र में कम संकलन पसंद न हो।

— ज्रुज़फ़ा

@jruzafa, उपरोक्त टिप्पणी समझ में नहीं आती है। कृपया एक बार फिर विस्तृत के साथ टिप्पणी करें।

— शंकर_कर

Answer 4

यह करने के लिए एक और "हैकिश" तरीका है, जिसमें vendor/modulename/view/adminhtml/web/images/icon.pngऔर कुछ सीएसएस लाइनों में एक पारदर्शी पीएनजी छवि जोड़ना है 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;
}

मुझे व्यक्तिगत रूप से वेबफोन्स बनाने में कठिनाइयाँ हुईं और ईमानदार होने के लिए मुझे लगता है कि एक व्यवस्थापक आइकन (1kb छवि) के लिए थोड़ा बहुत दृष्टिकोण है।

Answer 5

आप एक ऐसे व्यवस्थापक आइकन को भी देख सकते हैं जो पहले से मौजूद है और Magento के व्यवस्थापन पैटर्न लाइब्रेरी में आइकनोग्राफी के अंदर आपकी आवश्यकताओं से मेल खाता है और फिर vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessफ़ाइल में संबंधित LESS चर की तलाश करें ।

यदि आपको इस लाइब्रेरी में कुछ उपयोगी लगता है, तो अपने मॉड्यूल के अंदर सीधे अपनी 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फ़ाइल को निकालना होगा , और व्यवस्थापक पृष्ठ को फिर से लोड करना होगा