使用自定义图像的离子离子标签图标(ionic ion-tab icon with custom im

这是我对离子论坛原来的问题。所以我想我可能希望从这里得到一些帮助，已经有它没有任何反应了一段时间:(

所以，我的问题是真正的冠军。我想用我的自定义图像作为我的离子应用离子标签的图标。我检查了，它通过工作ionic serve做它，如下所示：

tabs.html

<ion-tabs class="tabs-icon-bottom tabs-color-active">
  <!-- this icon does not load -->
  <ion-tab title="LIVE" icon="tab-live energized" href="tab/live">
    <ion-nav-view name="tab-live"></ion-nav-view>
  </ion-tab>

  <ion-tab title="REPLAY" icon="tab-replay energized" href="tab/replay">
    <ion-nav-view name="tab-replay"></ion-nav-view>
  </ion-tab>

  <ion-tab title="SETTINGS" icon="ion-android-options energized" href="tab/setting">
    <ion-nav-view name="tab-setting"></ion-nav-view>
  </ion-tab>
</ion-tabs>

style.css

...
.tab-live {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-image: url('../img/live.png');
}
.tab-replay {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-image: url('../img/replay.png');
}

然而，当我在我的Android设备上运行应用程序时，它说Failed to load resource: net::ERR_FILE_NOT_FOUND我的tab-live和tab-live图标将不会加载。据我了解，当应用程序试图之前到内存被加载到加载一定的资源文件出现此错误。但只有tab-live图像加载失败，而所有其它图像加载罚款。

如果它可能是一个问题，在tab/live页是应用程序启动时加载什么，和我的尺寸live.png文件大约5.54kb 。我有我在此使用其他图片tab/live页较大这一形象，但它加载很好，我使用img与标签ng-src={{ btnImage }}周围改变它。

所以，这可能是造成这个问题，我怎么能解决这个问题？

提前致谢。

Answer 1:

对于离子自定义图标，你可以创建你的类名

代码波纹管...

.export-inactive{
    content: url('../img/icons/task-icons/export-inactive.svg'); !important;
}

例如

<div class="tabs tabs-icon-top">
<a class="tab-item">
            <i class="icon export-inactive"></i>
            Export
        </a>
</div>

Answer 2:

此错误意味着该文件没有被发现。无论道路是错误的或你希望它是文件不存在。你肯定在WWW / IMG文件夹中的图像，因为它的工作对我的机器人。

Answer 3:

请检查文件名和图像文件的扩展名。当你测试与应用“离子伺候”它是不区分大小写，但在Android设备区分大小写是很重要的。

例如：改变“myicon.PNG”到“myicon.png”

Answer 4:

我一直在研究实现相同的功能和面临类似的问题。这是我对离子论坛返回的信息，我不知道，如果问题仍然存在，但也许我的回答能帮助谁可能会遇到这样的开发者。所以，在这里是如何打钉：

 /* In tabs.scss: */ // CSS for Settings icon. .ion-ios-settings, .ion-md-settings { content: url(../assets/icon/cutom-selected-icon.svg); width: 24px; } .ion-ios-settings-outline { content: url(../assets/icon/cutom-unselected-icon.svg); width: 24px; } .ion-md-settings[ng-reflect-is-active=false]{ content: url(../assets/icon/cutom-unselected-icon.svg); width: 24px; }

 <!-- In tabs.html: --> <ion-tabs [selectedIndex]="indexselected" > <ion-tab [root]="tab1Root" tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="abc" tabIcon="abc"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="xyz" tabIcon="xyz"></ion-tab> </ion-tabs>

感谢：D

文章来源: ionic ion-tab icon with custom image