Magento 2：如何在自定义模块的管理菜单中更改默认字体图标？

15

我需要在管理菜单中添加字体图标。

像所有magento 2核心菜单一样，默认情况下，它显示自定义模块菜单的六角形图标，如何更改它？

magento2 adminmenu

— 塔拉尔·帕托里亚
source

24

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>

看到id Magento在'::'之后使用最后一个单词， modulename然后将名称添加到lihtml a类的标签父元素中class='item-modulename parent level-0'

— Praful Rajput
source

顺便说一句，它应该是.lib-font-face还是.font-face？

— MagePsycho

我不确定这对您有什么作用？这给.font-face是未定义的错误。请改用.lib-font-face。

— MagePsycho

我已将其用于Beta版。我现在正在稳定地进行操作，并告诉您。

— Praful Rajput

这对我不起作用。

— MaYaNk'6

您能否详细咨询一下，您在那儿面临什么？

— Praful Rajput

6

我尝试了上述解决方案，但对我不起作用。所以我试图把_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';

— 玛雅克
source

1

阅读这篇文章，我们分步介绍了如何轻松更改：uecommerce.com.br/… 谢谢

— Rafael Ortega Bueno

供应商文件夹可能会发生很大的变化，一旦您执行了Magento安全补丁，使用此路由后，此更改将消失。而且，如果您使用部署系统，则此更改将永远不会出现。

— Evensis

5

上述答案都忙得不同的文件夹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）。参考屏幕截图：

— Sankar_k
source

当我在前端有一个sass实现并且不喜欢在管理区域进行较少的编译时，它对我很有用。

— jruzafa

@jruzafa，以上评论不明白。请再次发表详细评论。

— Sankar_k

0

另一种“骇人听闻的”方法是在中添加透明的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;
}

我个人在生成Web字体时遇到了困难，老实说，我发现这种方法对于管理员图标（1kb图像）来说有点过多。

— 拉杜
source

0

您还可以在Magento管理员模式库的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文件，然后重新加载管理页面

— 扬·特里莫洛（Yonn Trimoreau）
source