Magento 2: Özel modül için menü yöneticisinde varsayılan yazı tipi Simgesini nasıl değiştirebilirim?

15

Yönetici menüsüne yazı tipi simgesi eklemem gerekiyor.

Tüm temel magento 2 menüleri gibi, varsayılan olarak özel modül menüsü için altıgen simgeyi gösterir, nasıl değiştirebilirim?

magento2 adminmenu

— Taral Patoliya
kaynak

24

1. Simge Oluştur

Varsayılan olarak macenta 2 modülünüz için özel varsayılan simge ekleyin.

Ancak, özel simgenizi özel yönetici modülü menünüze ekleyebilirsiniz.

Inkscape yazılımı ile özel simge .svg oluşturun (açık kaynak kodlu

vektör oluşturma adam deneyin!).

IcoMoon.io yardımıyla bu .svg simgesinin yazı tipi simgesini oluşturun

Adresine git lib/web/fonts

modül klasörünüzü oluşturun. örnek alın Packageve IcoMoon.io'dan alınan / dışa aktarılan tüm dosyaları yapıştırın.

çekirdek dosyalara dokunmadan Magento 2 içine enjekte: Modül adınızPackage_Modulename

app / design / adminhtml / Magento / arka uca git

Package_Modulename / web / css / source / adıyla klasör oluştur

_module.lessKaynak klasör altında dosya oluştur

Gibi görünecek Package_Modulename/web/css/source/_module.less

Şimdi _module.less dosyanızın içine şu satırları ekleyin:

@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: işte modulenamegeliyoretc/adminhtml/menu.xml

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

'::' ifadesinden sonra son kelimeyi almak için Magento kimliğine bakın ve sınıf sonucunun etiketinin html üst modulenameöğesine adını ekleyinliaclass='item-modulename parent level-0'

Adım adım daha fazla bilgi için http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default -font-simge

— Praful Rajput
kaynak

BTW .lib-font-face veya .font-face olmalı?

— MagePsycho

Bunun sizin için nasıl çalıştığından emin değilim? hangi .font-face tanımsız bir hata veriyor. Bunun yerine .lib-font-face kullanın.

— MagePsycho

Beta sürümüne kullandım. Bunu şimdi kararlı hale getiriyorum ve size bildiriyorum.

— Praful Rajput

benim için işe yaramıyor.

— MaYaNk

Lütfen detaylı olarak tavsiye verebilir misiniz, orada ne ile karşılaşıyorsunuz?

— Praful Rajput

6

Yukarıdaki çözümü denedim ama işe yaramadı. bu yüzden _module.lessdosyayı koymaya çalıştım

vendor/magento/theme-adminhtml-backend/Your_Module/web/css/source

Direcrtory. ve benim için çalışıyor.

Bu önerilmez ama bunun için başka bir çözüm bulamadım. bu yüzden bu çözümü deniyorum. ve çalışıyor. çalıştığından emin olmak için aşağıdaki dosyayı kontrol edin:

 pub/static/adminhtml/Magento/backend/en_US/css/styles.less

Nerede böyle bir çizgi bulmak gerekir:

@import '../Your_Module/css/source/_module.less';

— mayank
kaynak

1

Bu yazıyı okuyun, kolay bir şekilde nasıl değiştirileceğini adım adım açıklıyoruz: uecommerce.com.br/… Teşekkürler

— Rafael Ortega Bueno

Satıcı klasörü büyük bir değişikliğe tabidir, bir Magento güvenlik düzeltme eki yaptığınız anda bu değişiklik kullanılırsa bu değişiklik kaybolacaktır. Ve bir dağıtım sistemi kullanıyorsanız, bu değişiklik asla görünmez.

— evensis

5

Bahsedilen cevap Üstü gibi farklı klasörler çalışılan lib, design.

Bu yüzden sadece özel uzantı dosyalarını çalıştık. Adım:

1) için menu.xmldosya oluşturdunuz Package_Modulename/etc/adminhtml. Kod

<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 yardımıyla bu .svg simgesinin yazı tipi simgesini oluşturun . Daha fazla bilgi Dokümanlar

3) için default.xmldosya oluşturun Package_Modulename/view/adminhtml/layout. Kodlama:

<?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) fontsKlasörü oluşturun Package_Modulename/view/adminhtml/webve simge dosyalarını yapıştırın. Dosyalar

icon.eot

icon.svg

icon.ttf

icon.woff

5) için icon.cssdosya oluşturun Package_Modulename/view/adminhtml/web/css. Kod

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

Not: Kodlamanın üstünde content: '\e900';değeri kontrol edin. Lütfen yazı tipi paketi dosyasını ( demo.html) kontrol edin . Ekran görüntüsüne bakın:

— Sankar_k
kaynak

Bana çalıştı ve yönetici alanında daha az derlemek gibi değil, ön uçta bir sass uygulaması olduğunda çok çözüm.

— jruzafa

@jruzafa, Yukarıdaki yorum anlamıyor. Lütfen ayrıntılı olarak bir kez daha yorum yapın.

— Sankar_k

0

Bunu yapmanın başka bir "hackish" yolu, şeffaf bir png resmi vendor/modulename/view/adminhtml/web/images/icon.pngve içine birkaç css satırı eklemektir 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;
}

Ben şahsen webfonts oluşturmakta zorlandım ve dürüst olmak gerekirse bu yaklaşım bir yönetici simgesi (1kb görüntü) için biraz fazla buluyorum.

— Radu
kaynak

0

Ayrıca Magento Yönetici Kalıbı Kütüphanesi'ndeki İkonografi içinde zaten var olan ve ihtiyaçlarınızı karşılayan bir yönetici simgesi arayabilir ve daha sonra vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessdosyadaki ilgili LESS değişkenini arayabilirsiniz .

Bu kitaplıkta yararlı bir şey bulursanız, LESS dosyanızı doğrudan modülünüzde oluşturun (adminhtml temasına gerek yoktur) Vendor/ModuleName/view/adminhtml/web/css/source/_module.lessve aşağıdaki içerikle doldurun:

.admin__menu .item-modulename.parent.level-0 > a:before {
  content: @icon-tool__content; // Or whatever icon variable you want
}

Ardından, pub/static/adminhtml/Magento/backend/en_US/css/styles.cssdosyayı kaldırmanız ve yönetici sayfasını yeniden yüklemeniz gerekir

— Yonn Trimoreau
kaynak