Magento 2: Bagaimana saya dapat mengubah Font font default di admin menu untuk modul kustom?

15

Saya perlu menambahkan ikon font di menu admin.

Seperti semua menu inti magento 2, secara default ini menunjukkan ikon heksagonal untuk menu modul khusus, bagaimana saya bisa mengubahnya?

masukkan deskripsi gambar di sini

magento2 adminmenu Taral Patoliya
sumber

Jawaban:

24

1. Buat Ikon

Secara default magento 2 tambahkan ikon default khusus untuk modul Anda.

Tetapi Anda dapat menambahkan ikon khusus Anda ke menu modul admin khusus Anda.

Buat ikon kustom .svg dengan perangkat lunak inkscape (open source lunak untuk

membuat vektor, coba!).

Buat ikon font ikon .svg itu dengan bantuan IcoMoon.io

Pergi ke lib/web/fonts

buat folder modul Anda. contoh Packagedan rekatkan semua file yang diperoleh / diekspor dari IcoMoon.io.

  1. menyuntikkannya ke dalam Magento 2 tanpa menyentuh file inti: Misalkan nama modul AndaPackage_Modulename

buka aplikasi / desain / adminhtml / Magento / backend

buat folder dengan nama Package_Modulename / web / css / source /

Buat _module.lessfile di bawah folder sumber

Akan terlihat seperti Package_Modulename/web/css/source/_module.less

Sekarang di dalam file Anda _module.less tambahkan baris ini:

@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: modulenameini berasal darietc/adminhtml/menu.xml

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

lihat id Magento ambil kata terakhir setelah '::' di sini adalah modulenamedan tambahkan nama ke lihtml induk dari atag hasil kelasclass='item-modulename parent level-0'

Untuk pemahaman selangkah demi selangkah, Anda dapat merujuk http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default ikon -font

Praful Rajput
sumber
BTW itu harus .lib-font-face atau .font-face?
MagePsycho
Saya tidak yakin bagaimana ini bekerja untuk Anda? yang memberikan .font-face adalah kesalahan yang tidak terdefinisi. Gunakan .lib-font-face saja.
MagePsycho
Saya telah menggunakannya dalam versi beta. Saya melakukannya sekarang menjadi stabil dan memberi tahu Anda.
Praful Rajput
itu tidak bekerja untuk saya.
MaYaNk
Bisakah Anda memberi saran secara rinci, apa yang Anda hadapi di sana?
Praful Rajput
6

Saya mencoba solusi di atas tetapi tidak berhasil untuk saya. jadi saya mencoba memasukkan _module.lessfile

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

Direktori. dan itu bekerja untuk saya.

Ini tidak disarankan tetapi saya tidak menemukan solusi lain untuk ini. jadi saya coba solusi ini. dan itu berhasil. periksa file berikut untuk memastikannya berfungsi:

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

Di mana Anda harus menemukan garis seperti ini:

@import '../Your_Module/css/source/_module.less';
MaYaNk
sumber
1
Baca pos ini, kami jelaskan dalam langkah-langkah cara mengubahnya dengan cara yang mudah: uecommerce.com.br/... Terima kasih
Rafael Ortega Bueno
Folder vendor dapat mengalami banyak perubahan, segera setelah Anda melakukan patch keamanan Magento, perubahan ini akan hilang jika menggunakan rute ini. Dan jika Anda menggunakan sistem penyebaran, perubahan ini tidak akan pernah muncul.
evensis
5

Di atas jawaban disebutkan yang bekerja folder yang berbeda seperti lib, design.

Jadi kami hanya mengerjakan file ekstensi khusus. Langkahnya adalah:

1) Anda telah membuat menu.xmlfile untuk Package_Modulename/etc/adminhtml. Kode adalah

<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) Buat ikon font ikon .svg itu dengan bantuan IcoMoon.io . Lebih detail Dokumen

3) Buat default.xmlfile untuk Package_Modulename/view/adminhtml/layout. Coding adalah:

<?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) Buat fontsfolder Package_Modulename/view/adminhtml/webdan tempel file ikon. File adalah

icon.eot

icon.svg

icon.ttf

icon.woff

5) Buat icon.cssfile untuk Package_Modulename/view/adminhtml/web/css. Kode adalah

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

Catatan: Pengodean di atas content: '\e900';memeriksa nilainya. Silakan periksa file paket font ( demo.html). Lihat tangkapan layar:

masukkan deskripsi gambar di sini

Sankar_k
sumber
Itu berhasil saya dan itu sangat solusi ketika memiliki implementasi sass di frontend dan tidak suka kompilasi kurang di area admin.
jruzafa
@jruzafa, Komentar di atas tidak mengerti. Silakan komentar sekali lagi dengan terperinci.
Sankar_k
0

Cara lain "meretas" untuk melakukannya adalah dengan menambahkan gambar png transparan di vendor/modulename/view/adminhtml/web/images/icon.pngdan beberapa baris css di 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;
}

Saya pribadi mengalami kesulitan membuat webfonts dan sejujurnya saya menemukan pendekatan itu terlalu banyak untuk ikon admin (gambar 1kb).

Radu
sumber
0

Anda juga bisa mencari ikon admin yang sudah ada dan cocok dengan kebutuhan Anda di dalam Iconography di Magento Library Pattern Library dan kemudian mencari variabel KURANG yang sesuai pada vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lessfile.

Jika Anda menemukan sesuatu yang berguna di perpustakaan ini, buat file KURANG Anda langsung di dalam modul Anda (tidak perlu tema adminhtml) di Vendor/ModuleName/view/adminhtml/web/css/source/_module.lessdan isi dengan konten berikut:

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

Kemudian, Anda harus menghapus pub/static/adminhtml/Magento/backend/en_US/css/styles.cssfile, dan memuat kembali halaman admin

Yonn Trimoreau
sumber