Hướng dẫn thay đổi icon module trong Magento 2
Để cá nhân hóa module của mình, các bạn có thể thay đổi icon module trong Magento 2, với chỉ một vài bước đơn giản.
Khi chúng ta tạo mới một module thì icon mặc định sẽ có hình như sau.
Bây giờ chúng ta sẽ tiến hành thay đổi icon module.
Bước 1: Module cần phải có menu, các bạn có thể tham khảo bài viết: Hướng dẫn tạo menu admin module trong Magento 2.
Bước 2: Các bạn cần chuẩn bị một ảnh định dạng svg, nếu chỉ có ảnh ở định dạng khác thì các bạn có thể chuyển sang svg nhờ trang https://onlineconvertfree.com/
Truy cập vào trang trên click Choose Files rồi chọn ảnh cần chuyển
Chọn định dạng cần đổi là svg rồi chọn Convert.
Đợt cho quá trình convert thành công chọn Download để tải về
Bước 3: Copy ảnh svg vừa tải vào thư mục app/code/Magetop/Helloworld/view/adminhtml/web/images/, các bạn nên đổi lại tên ảnh để thuận tiện hơn.
Bước 4: Tạo file icon.css trong thư mục app/code/Magetop/Helloworld/view/adminhtml/web/css/ với đoạn code:
.admin__menu .level-0.item-icon > a:before {
content: url('../images/magetop.svg');
height: 30px;
margin: 0 auto;
width: 30px;
}
Bước 5: Tạo file default.xml trong thư mục app/code/Magetop/Helloworld/view/adminhtml/layout với đoạn code:
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* default
*
* @copyright Copyright © 2020 MAGETOP. All rights reserved.
* @author [email protected]
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magetop_Helloworld::css/icon.css"/>
</head>
</page>
Bước 6: Chạy lệnh
php bin/magento setup:static-content:deploy -f --area adminhtml
php bin/magento cache:clean
Sau đó chúng ta vào admin kiểm tra kết quả.
Lưu ý: Nếu trước đó module của bạn đã có menu.xml thì các bạn nên gỡ module và cài lại nếu không thấy icon mới hiển thị.
Như vậy là mình đã hướng dẫn xong cách thay đổi icon module trong Magento 2.
Cảm ơn các bạn đã đọc bài viết.
