Question

如何在离子v2的标题中插入徽标？

<ion-header>

  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>

</ion-header>

Answer 1

    <ion-header>

  <ion-navbar>
    <ion-title>
<img alt="logo" height="40"   src="img/logo.png" > 
</ion-title>
  </ion-navbar>

</ion-header>

Ionic中的标题高度为44px。因此，您需要确保徽标的大小小于该值。

.title-image {
    margin-top: 8px;
    height: 27px;
}

Answer 2

这很简单。使用方法：

<img alt="logo" height="40"   src="img/logo.png" >

和

<ion-header>
 <ion-navbar>
   <ion-title>
    <img alt="logo" height="40"   src="img/logo.png" > 
   </ion-title>
</ion-navbar>
</ion-header>

Answer 3

我知道这是一个古老的问题，提供的答案完全正确，但这是我在将Ionic 4的每个页面的页面标题左侧添加应用程序图标时偶然发现的一个问题。 / p>

因为我已经配置了15个左右的页面，所以我发现最简单的方法是在global.scss文件中设置样式，如下所示，使用这种方法，我不必更改任何现有的页面组件。 / p>

您可能需要根据图像的大小调整CSS中的定位值，但作为参考，我的徽标图像为16px x 16px。

global.scss

ion-header {
    ion-toolbar {
        ion-title {
            background-image: url('./assets/icon/favicon.png');
            background-repeat: no-repeat;
            background-position: 5px 3px;
            padding-left: 27px;
        }
    }
}

我的每个页面组件都已经具有以下结构，我不需要更改此结构，但是它向您显示了我项目中的html结构。

页面组件HTML

<ion-header>
    <ion-toolbar>
        <ion-title translate>Label.Snags</ion-title>
    </ion-toolbar>
</ion-header>

Ionic v2如何在标题中插入徽标

3 个答案: