Html 如何将png用作ionic选项卡中的图标，而不是svg/svg？

我在谷歌上搜索了很多，到目前为止还没有找到解决办法

我有一个标签页：

<ion-tabs>
  <ion-tab [root]="HomeTab" tabTitle="Home" ></ion-tab>
  <ion-tab [root]="RecentTab" tabTitle="Recents"></ion-tab>
  <ion-tab [root]="FavTab" tabTitle="Favorites"></ion-tab>
  <ion-tab [root]="PersonalTab" tabTitle="Personal"></ion-tab>
  <ion-tab [root]="InfoTab" tabTitle="Information"></ion-tab>
</ion-tabs>

使用一个已实现的爱奥尼亚svg图标可以很好地工作，并在文本上方添加图标：

然而，我仍然没有弄明白如何使用PNG作为图标。网络上的大多数教程似乎都是围绕自定义SVG展开的，但是没有一个是关于使用PNG/JPEG的

我犯了什么错？有更好的解决办法吗

---

提前感谢

您可以使用自定义类来完成此操作

在ion tab指令上，将css类设置为通过图标打开/关闭使用

<ion-tab title="Home" icon-on="home" icon-off="home">

---

找到了一个适合我的解决方案：

在SASS/scss文件中，我选择要编辑的按钮，然后用png的来源路径覆盖它：

.ion-md-home {
content: url("../assets/img/PATH.png") !important; } 

---

然后根据需要添加格式化。

我就是这样做的。我想得更优雅一些：

在HTML模板中，我添加了一个空的img元素，并指定了一个css类

    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="clean">
            <img class="custom-icon-clean-image"/>
            <ion-label>
                Clean
            </ion-label>
        </ion-tab-button>
        <ion-tab-button tab="dirty">
            <img class="custom-icon-dirty-image"/>
            <ion-label>
                Dirty
            </ion-label>
        </ion-tab-button>
    </ion-tab-bar>

---

解决方案也适用于ionic 5。

您在哪里传递图像？我是初学者，不理解您的问题。然而：我的计划是拥有一个包含所有图标的文件夹：src/app/assets/iconPNG。如果有帮助的话，你可以看到这个答案-你能解释一下你到底在说什么吗？我按照你的建议实现了它，但是它仍然不起作用。问题1:.icon.home:home是htm页面的名称，还是我们要覆盖的名称？问题2：是否可以检查我的imagelink/路径是否正确？您正在添加css类并将其附加到选项卡。很抱歉，您的css类有图像图标，但该图标未显示。我采取了您精确编写的步骤，但仍然是错误的，所以这在V3中对我有效，您知道如何在V4中做到这一点吗？

    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="clean">
            <img class="custom-icon-clean-image"/>
            <ion-label>
                Clean
            </ion-label>
        </ion-tab-button>
        <ion-tab-button tab="dirty">
            <img class="custom-icon-dirty-image"/>
            <ion-label>
                Dirty
            </ion-label>
        </ion-tab-button>
    </ion-tab-bar>

.custom-icon-clean-image {
  content:url("../../assets/icon/barrel_outline.png");
}

ion-tab-button.tab-selected .custom-icon-clean-image {
  content:url("../../assets/icon/barrel_outline_active.png");
}