dcat-admin 如何自定义或者新增一些icon|图标

很遗憾在网上搜了很多还是未能找到如何增加后台的图标icon的教程,如下图
如果您有相关的文章或您会还望您能分享出来,让更多的人看到,也留下您的记忆。

dcat-admin 如何自定义或者新增一些icon|图标

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 3

要将自定义图标嵌入到 Dcat Admin 的图标选择器中,使其表现得像 admin/helpers/icons 中的图标一样,您需要修改一些 Dcat Admin 的核心文件和资源。这通常涉及到以下几个步骤:

步骤 1: 准备图标

确保您的自定义图标(最好是 SVG 格式)已经准备好,并放置在项目的适当目录中,例如 public/icons

步骤 2: 修改图标帮助器文件

Dcat Admin 的图标帮助器文件通常位于 resources/views/admin/helpers/icons.blade.php。您需要修改这个文件,以包含您的自定义图标。

  1. 打开图标帮助器文件: 找到 resources/views/admin/helpers/icons.blade.php 文件。

  2. 添加自定义图标: 在这个文件中,您可以添加一个新的部分来显示您的自定义图标。例如:

    <div class="icon-section">
        <h4>自定义图标</h4>
        <div class="icon-list">
            <span title="icon-name" data-icon="custom-icon-class"><i class="custom-icon-class"></i></span>
            <!-- 更多图标 -->
        </div>
    </div>

    在这里,custom-icon-class 是您的图标的 CSS 类名,您需要在 CSS 文件中定义这个类,以引用您的 SVG 或其他格式的图标。

步骤 3: 添加或修改 CSS

您需要确保图标在图标选择器中正确显示。这通常需要在 Dcat Admin 的 CSS 文件中添加一些样式。

  1. 创建或修改 CSS: 在 Dcat Admin 的公共 CSS 文件中添加对您的自定义图标的引用。例如:

    .custom-icon-class {
        background-image: url('/path/to/your/icon.svg');
        display: inline-block;
        width: 20px; // 或您的图标大小
        height: 20px; // 或您的图标大小
        background-size: cover;
    }
  2. 确保 CSS 被加载: 确保您的 CSS 文件被正确加载到 Dcat Admin 的布局中。这可能涉及到修改 resources/views/admin/layouts/app.blade.php 或通过 Webpack/Laravel Mix 将 CSS 文件编译到 Dcat Admin 的资源包中。

步骤 4: 清除缓存

由于您修改了视图和可能的配置文件,确保清除视图缓存和浏览器缓存。

php artisan view:clear

步骤 5: 测试

在完成所有修改后,登录到 Dcat Admin 后台,尝试打开图标选择器,查看您的自定义图标是否已经正确添加并可以使用。

通过这种方式,您可以将自定义图标嵌入到 Dcat Admin 的图标选择器中,使其可以在后台管理系统中方便地使用,从而提高用户体验和界面的个性化。

3周前 评论
liuhaiqiang999 (楼主) 3周前

上面说了一种,我说一种更简单的。 在bootstrap.php中引入字体图标的css文件。然后在菜单栏=>图标中填写class即可,目前使用iconfont上的图标没什么问题。但是不支持直接选。

3周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!