Magento 2: Làm cách nào tôi có thể thay đổi phông chữ mặc định Biểu tượng trong trình quản trị menu cho mô-đun tùy chỉnh?

15

Tôi cần thêm biểu tượng phông chữ trong menu quản trị.

Giống như tất cả các menu magento 2 lõi, theo mặc định, nó hiển thị biểu tượng lục giác cho menu mô-đun tùy chỉnh, làm cách nào để thay đổi?

nhập mô tả hình ảnh ở đây

magento2  adminmenu 
— Taral Patoliya
nguồn

Câu trả lời:

24

1. Tạo biểu tượng

Theo mặc định magento 2 thêm biểu tượng mặc định tùy chỉnh cho mô-đun của bạn.

Nhưng bạn có thể thêm biểu tượng tùy chỉnh vào menu mô-đun quản trị viên tùy chỉnh.

Tạo biểu tượng tùy chỉnh .svg bằng phần mềm inkscape (phần mềm nguồn mở cho

tạo vector thử người!).

Tạo biểu tượng phông chữ của biểu tượng .svg đó với sự trợ giúp của IcoMoon.io

Đi đến lib/web/fonts

tạo thư mục mô-đun của bạn. ví dụ Packagevà dán tất cả các tệp thu được / xuất từ ​​IcoMoon.io.

  1. đưa nó vào bên trong Magento 2 mà không chạm vào các tệp cốt lõi: Giả sử tên mô-đun của bạn làPackage_Modulename

đi tới ứng dụng / thiết kế / adminhtml / Magento / phụ trợ

tạo thư mục có tên Package_Modulename / web / css / source /

Tạo _module.lesstập tin trong thư mục nguồn

Nó sẽ giống như Package_Modulename/web/css/source/_module.less

Bây giờ trong tệp của bạn _module.less thêm dòng này:

@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: ở đây modulenamecó nguồn gốc từetc/adminhtml/menu.xml

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

hãy xem id Magento lấy từ cuối cùng sau '::' ở đây modulenamevà thêm tên vào lihtml cha của athẻ, kết quả lớp làclass='item-modulename parent level-0'

Để hiểu thêm từng bước, bạn có thể tham khảo http://ibnab.com/en/blog/magento-2/magento-2-backend-how-to-create-custom-menu-in-admin-and-change-default biểu tượng -font

— Rajput đáng khen ngợi
nguồn
BTW nó phải là .lib-font-face hay .font-face?
— MagePologistso
Tôi không chắc làm thế nào điều này làm việc cho bạn? cung cấp cho .font-face là lỗi không xác định. Sử dụng .lib-font-face thay thế.
— MagePologistso
Tôi đã sử dụng nó vào phiên bản beta. Tôi đang làm nó bây giờ vào ổn định và cho bạn biết.
— Rajput đáng khen ngợi
nó không làm việc cho tôi
— MaYaNk
Bạn có thể vui lòng tư vấn chi tiết, những gì bạn phải đối mặt ở đó?
— Rajput đáng khen ngợi
6

Tôi đã thử giải pháp trên nhưng nó không hiệu quả với tôi. vì vậy tôi đã cố gắng để _module.lesstập tin vào

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

Direcrtory. và nó làm việc cho tôi

Điều này không được khuyến khích nhưng tôi không tìm thấy giải pháp nào khác cho việc này. vì vậy tôi thử giải pháp này Và nó hoạt động. kiểm tra tệp sau để chắc chắn rằng nó hoạt động:

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

Nơi bạn nên tìm một dòng như thế này:

@import '../Your_Module/css/source/_module.less';
— MaYaNk
nguồn
1
Đọc bài đăng này, chúng tôi mô tả các bước làm thế nào để thay đổi một cách dễ dàng: uec Commerce.com.br/ cảm ơn
— Rafael Ortega Bueno
Thư mục nhà cung cấp chịu nhiều thay đổi, ngay khi bạn thực hiện bản vá bảo mật Magento, thay đổi này sẽ biến mất nếu sử dụng tuyến đường này. Và nếu bạn sử dụng một hệ thống triển khai, thay đổi này sẽ không bao giờ xuất hiện.
— evensis
5

Câu trả lời được đề cập ở trên được làm việc các thư mục khác nhau như lib, design.

Vì vậy, chúng tôi chỉ làm việc các tập tin mở rộng tùy chỉnh. Bước này là:

1) bạn đã tạo menu.xmltập tin cho Package_Modulename/etc/adminhtml. Mã là

<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) Tạo biểu tượng phông chữ của biểu tượng .svg đó với sự trợ giúp của IcoMoon.io . Thêm chi tiết Tài liệu

3) Tạo default.xmltập tin cho Package_Modulename/view/adminhtml/layout. Mã hóa là:

<?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) Tạo fontsthư mục trong Package_Modulename/view/adminhtml/webvà dán các tập tin biểu tượng. Tập tin là

biểu tượng

icon.svg

biểu tượng.ttf

icon.woff

5) Tạo icon.csstập tin cho Package_Modulename/view/adminhtml/web/css. Mã là

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

Lưu ý: Trên mã hóa content: '\e900';kiểm tra giá trị. Vui lòng kiểm tra tập tin gói phông chữ ( demo.html). Tham khảo ảnh chụp màn hình:

nhập mô tả hình ảnh ở đây

— Sankar_k
nguồn
Nó đã làm việc cho tôi và nó rất là giải pháp khi có một triển khai sass ở frontend và không thích biên dịch ít hơn trong khu vực quản trị.
— jruzafa
@jruzafa, Trên bình luận không hiểu. Hãy bình luận một lần nữa với chi tiết.
— Sankar_k
0

Một cách "hackish" khác để làm điều đó là thêm một hình ảnh png trong suốt vào vendor/modulename/view/adminhtml/web/images/icon.pngvà một vài dòng css trong 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;
}

Cá nhân tôi đã gặp khó khăn khi tạo các webfont và thành thật mà nói tôi thấy cách tiếp cận đó hơi quá đối với một biểu tượng quản trị (hình ảnh 1kb).

— Radu
nguồn
0

Bạn cũng có thể tìm kiếm một biểu tượng quản trị viên đã tồn tại và phù hợp với nhu cầu của bạn bên trong Biểu tượng trong Thư viện mẫu quản trị Magento và sau đó tìm biến LESS tương ứng trong vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.lesstệp.

Nếu bạn tìm thấy một cái gì đó hữu ích trong thư viện này, hãy tạo tệp LESS của bạn trực tiếp bên trong mô-đun của bạn (không cần chủ đề adminhtml) tại Vendor/ModuleName/view/adminhtml/web/css/source/_module.lessvà điền vào đó với nội dung sau:

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

Sau đó, bạn phải xóa pub/static/adminhtml/Magento/backend/en_US/css/styles.csstệp và tải lại trang quản trị

— Yonn Trimoreau
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.