ম্যাজেন্টো 2: আমি কাস্টম মডিউলটির জন্য মেনু অ্যাডমিনের ডিফল্ট ফন্ট আইকনটি কীভাবে পরিবর্তন করতে পারি?

Question

আমাকে অ্যাডমিন মেনুতে ফন্ট আইকন যুক্ত করতে হবে।

সমস্ত মূল ম্যাজেন্টো 2 মেনুর মতো, ডিফল্টরূপে এটি কাস্টম মডিউল মেনুতে ষড়ভুজ আইকন দেখায়, আমি কীভাবে এটি পরিবর্তন করতে পারি?

Answer 1

1. আইকন তৈরি করুন

ডিফল্ট ম্যাজেন্টো 2 দ্বারা আপনার মডিউলটির জন্য কাস্টম ডিফল্ট আইকন যুক্ত করুন।

তবে আপনি নিজের কাস্টম অ্যাডমিন মডিউল মেনুতে আপনার কাস্টম আইকন যুক্ত করতে পারেন।

ইনস্কেপ সফ্টওয়্যার দিয়ে কাস্টম আইকন .svg তৈরি করুন (এর জন্য ওপেন সোর্স নরম

ভেক্টর তৈরি করার চেষ্টা করুন মানুষ!)।

IcoMoon.io এর সাহায্যে .svg আইকনের ফন্ট আইকন তৈরি করুন

যাও lib/web/fonts

আপনার মডিউল ফোল্ডার তৈরি করুন। PackageIcoMoon.io থেকে প্রাপ্ত / রফতানি হওয়া সমস্ত ফাইল উদাহরণ এবং পেষ্ট করুন।

2. মূল ফাইলগুলিকে স্পর্শ না করে এটিকে ম্যাজেন্টো 2-এর অভ্যন্তরে ইনজেকশন করা হয়েছে: মনে করা আপনার মডিউলটির নামPackage_Modulename

অ্যাপ / ডিজাইন / প্রশাসনিক / ম্যাজেন্টো / ব্যাকএন্ডে যান

প্যাকেজ_মডিউলনেম / ওয়েব / সিএসএস / উত্স / নাম দিয়ে ফোল্ডার তৈরি করুন

_module.lessউত্স ফোল্ডারের অধীনে ফাইল তৈরি করুন

মনে হবে Package_Modulename/web/css/source/_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>

দেখুন '::' এর পরে ম্যাজেন্টো শেষ শব্দটি নিন modulenameএবং এখানে ট্যাগের liএইচটিএমএল পিতামাতার নাম যুক্ত 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-আইকন

Comments

বিটিডাব্লুতে এটি .lib-font-face বা .font-face হওয়া উচিত?

— ম্যাজপাইকো

আমি নিশ্চিত না যে এটি আপনার পক্ষে কীভাবে কাজ করেছিল? যা ফন্ট-ফেস দেয় তা সংজ্ঞায়িত ত্রুটি। পরিবর্তে .lib-font-face ব্যবহার করুন।

— ম্যাজপাইকো 19'13

আমি এটি বিটা সংস্করণে ব্যবহার করেছি। আমি এখন এটি স্থিতিশীল করছি এবং আপনাকে জানাতে চাই।

— প্রফুল রাজপুত

এটা আমার জন্য কাজ করে না।

— MaYaNk

আপনি কি দয়া করে বিস্তারিত পরামর্শ দিতে পারেন, সেখানে আপনি কীসের মুখোমুখি হন?

— প্রফুল রাজপুত

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/… ধন্যবাদ

— রাফায়েল অরতেগা বুয়েনো

বিক্রেতা ফোল্ডারটি প্রচুর পরিবর্তনের সাপেক্ষে, আপনি কোনও ম্যাজেন্টো সুরক্ষা প্যাচ করার সাথে সাথেই এই রুটটি ব্যবহার করা হলে এই পরিবর্তনটি অদৃশ্য হয়ে যাবে। এবং আপনি যদি একটি মোতায়েনের ব্যবস্থা ব্যবহার করেন তবে এই পরিবর্তনটি কখনই প্রদর্শিত হবে না।

— 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

এটি আমার কাজ করেছিল এবং এটি খুব সমাধান যখন সম্মুখভাগে একটি সাস বাস্তবায়ন হয় এবং অ্যাডমিন অঞ্চলে কম সংকলন করা পছন্দ না করে।

— জুরুজাফা

@ জরুজাফা, উপরের মন্তব্যটি বোঝে না। বিস্তারিত আবার মন্তব্য করুন।

— সংকর_কি

Answer 4

এটি করার আরেকটি "হ্যাকিশ" উপায় হ'ল একটি স্বচ্ছ png চিত্র 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;
}

আমার ব্যক্তিগতভাবে ওয়েবফন্টগুলি তৈরি করতে অসুবিধা হয়েছিল এবং সত্য বলতে আমি অ্যাডমিন আইকন (1 কেবি চিত্র) এর জন্য এই পদ্ধতিকে কিছুটা অত্যধিক পাই।

Answer 5

আপনি এমন একটি অ্যাডমিন আইকনও সন্ধান করতে পারেন যা ইতিমধ্যে বিদ্যমান এবং ম্যাজেন্টো অ্যাডমিন প্যাটার্ন লাইব্রেরিতে আইকনোগ্রাফির ভিতরে আপনার প্রয়োজনগুলির সাথে মেলে এবং তারপরে সম্পর্কিত এলইএসসি ভেরিয়েবলটি সন্ধান করুন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ফাইলটি সরিয়ে , এবং প্রশাসক পৃষ্ঠাটি পুনরায় লোড করতে হবে