如何将defaut菜单图标更改为ionic中的图像图标

dpk*_*dpk 3 html image angularjs ionic-framework

我正在尝试将菜单图标替换为离子应用程序中的图像图标。我有一个menu.html如下:

<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
 </ion-side-menu-content>

<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
 </header>
  <ion-content class="has-header">
  <ion-list>
    <ion-item menu-close ui-sref="app.home">
      Home
    </ion-item>
    <ion-item menu-close ui-sref="app.profile">
      Update Profile
    </ion-item>
    <ion-item menu-close ui-sref="app.project">
     Add Project
    </ion-item>

    <ion-item menu-close ng-click="logout();">
      Log Out
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Run Code Online (Sandbox Code Playgroud)

但是我不知道如何用图像图标替换菜单图标。你能帮忙吗

这是home.html:

 <ion-nav-buttons side="left">
 <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
 </ion-nav-buttons>
 <icon-view>
 <ion-pane>
 <ion-content>
 </ion-content>
 </ion-pane>
 </icon-view>
Run Code Online (Sandbox Code Playgroud)

小智 8

在 Ionic 4 中,只需在模板中使用以下代码

<ion-buttons slot="start"> <ion-menu-button> <img src='../../assets/icon/favicon.png'> </ion-menu-button> </ion-buttons>
Run Code Online (Sandbox Code Playgroud)

  • 这应该是例外的答案。不会覆盖任何内容,但会按预期工作。 (3认同)

小智 7

对于Ionic 4+,只需用

<ion-menu-toggle>
    <img src='your-src'>
</ion-menu-toggle>
Run Code Online (Sandbox Code Playgroud)


seb*_*ras 6

从 Ionic 5 开始,您可以在ion-icon其中添加任何其他内容,ion-menu-button如下所示:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>
        <ion-icon color="success" name="close"></ion-icon> // <--- here
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
Run Code Online (Sandbox Code Playgroud)

同样,您还可以使用自定义 SVG 图标:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>
        <ion-icon 
          color="success" 
          src="assets/my-icons/custom-menu.svg" // <--- like this
        ></ion-icon>
      </ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
Run Code Online (Sandbox Code Playgroud)


Aki*_*fas 0

用标签替换button和类naviconimage

<ion-nav-buttons side="left">
 <img src="img/myImage.jpg" class="button button-icon button-clear" menu-toggle="left">
 </ion-nav-buttons>
 <icon-view>
 <ion-pane>
 <ion-content>
 </ion-content>
 </ion-pane>
 </icon-view>
Run Code Online (Sandbox Code Playgroud)

小提琴示例