Magento 2：カスタムモジュールのメニュー管理でデフォルトのフォントアイコンを変更するにはどうすればよいですか？
回答:
1.アイコンを作成
デフォルトでは、magento 2はモジュールのカスタムデフォルトアイコンを追加します。
ただし、カスタム管理モジュールメニューにカスタムアイコンを追加できます。
inkscapeソフトウェアでカスタムアイコン.svgを作成します（オープンソースソフト
ベクトルを作成してみてください！）。
IcoMoon.ioの助けを借りて、その.svgアイコンのフォントアイコンを作成する
に行く lib/web/fonts
モジュールフォルダーを作成します。例PackageおよびIcoMoon.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";
}item-modulename：ここmodulenameから来ていますetc/adminhtml/menu.xml
<menu>
<add id="Package_Modulename::modulename" title="Modulename" module="Package_Modulename" sortOrder="40" resource="Package_Modulename::modulename"/>
</menu>Magentoが '::'の後の最後の単語を取得し、クラスの結果であるタグのhtml親にmodulename名前を追加するIDを参照してください 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を参照してください-font-icon
上記の解決策を試しましたが、うまくいきませんでした。だから私は_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）を確認してください。スクリーンショットを参照してください：
別の「ハッキング」方法は、透明なpng画像をに追加しvendor/modulename/view/adminhtml/web/images/icon.png、いくつかのcss行を追加することです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内で既に存在し、ニーズに一致する管理アイコンを探してから、対応するLESS変数を探すこともできます。vendor/magento/theme-adminhtml-backend/web/css/source/variables/_icons.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ファイルを削除して、管理ページを再ロードする必要があります