마 젠토 2 : 사용자 정의 모듈의 메뉴 관리자에서 기본 글꼴 아이콘을 변경하려면 어떻게해야합니까?
답변:
1. 아이콘 만들기
기본적으로 magento 2는 사용자 정의 기본 아이콘을 모듈에 추가합니다.
그러나 사용자 정의 관리 모듈 메뉴에 사용자 정의 아이콘을 추가 할 수 있습니다.
inkscape 소프트웨어로 사용자 정의 아이콘 .svg 만들기 (오픈 소스 소프트
벡터를 만들어보십시오!).
IcoMoon.io의 도움으로 해당 .svg 아이콘의 글꼴 아이콘 만들기
이동 lib/web/fonts
모듈 폴더를 만듭니다. 예를 들어 PackageIcoMoon.io에서 가져 오거나 내 보낸 모든 파일을 붙여 넣습니다.
- 코어 파일을 건드리지 않고 Magento 2에 삽입했습니다 :
모듈 이름이
Package_Modulename
app / design / adminhtml / Magento / backend로 이동
이름이 Package_Modulename / web / css / source / 인 폴더를 만듭니다.
_module.less소스 폴더 아래에 파일 만들기
그것은 것 같습니다 Package_Modulename/web/css/source/_module.less
이제 _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>
ID Magento가 '::'다음에 나오는 마지막 단어를 보고 클래스 결과 인 태그의 html parent에 modulename이름을 추가하십시오.liaclass='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 를 참조하십시오. -글꼴 아이콘
위의 솔루션을 시도했지만 효과가 없었습니다. 그래서 _module.less파일 을 넣으려고 했습니다.
vendor/magento/theme-adminhtml-backend/Your_Module/web/css/source이혼. 그리고 그것은 나를 위해 작동합니다.
이것은 권장되지 않지만 다른 해결책을 찾지 못했습니다. 그래서이 솔루션을 사용해보십시오. 작동합니다. 다음 파일을 확인하여 작동하는지 확인하십시오.
pub/static/adminhtml/Magento/backend/en_US/css/styles.less다음과 같은 줄을 찾아야합니다.
@import '../Your_Module/css/source/_module.less';상술 한 대답 위와 같이 서로 다른 폴더에 근무하고 있습니다 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)을 확인하십시오 . 스크린 샷을 참조하십시오.
이를 수행하는 또 다른 "해킹"방법은 다음 vendor/modulename/view/adminhtml/web/images/icon.png의 일부 CSS 행에 투명 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;
}나는 개인적으로 웹 글꼴을 생성하는 데 어려움이 있었고 솔직히 말하면 관리자 아이콘 (1kb 이미지)에 대해 너무 많은 접근 방식을 발견했습니다.
Magento Admin Pattern Library 의 Iconography 내에서 이미 존재하고 사용자의 요구와 일치하는 관리자 아이콘을 찾은 다음 vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.less파일 에서 해당 LESS 변수를 찾을 수 있습니다.
이 라이브러리에서 유용한 것을 찾으면 모듈 내부에 LESS 파일을 만들고 (adminhtml 테마 필요 없음) 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파일을 제거 하고 관리자 페이지를 다시로드 해야합니다 .