Question

我正在尝试将离子应用程序中的菜单图标替换为图像图标。我有一个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>

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

这是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>

Answer 1

对于Ionic 4+，只需将图片图标包裹为

<ion-menu-toggle>
    <img src='your-src'>
</ion-menu-toggle>

Answer 2

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

<ion-buttons slot="start"> <ion-menu-button> <img src='../../assets/icon/favicon.png'> </ion-menu-button> </ion-buttons>

Answer 3

使用button代码替换navicon和image类

<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>

Example fiddle

Answer 4

您可以在 app.scss 中全局覆盖菜单图标的css，方法是在资源文件夹中添加以下css和菜单图标。

ion-icon[name='menu']:before {
  content: url('../assets/icon/menu.png');
}

Answer 5

您还可以使用以下工具将图像转换为svg文件： image converter

拥有SVG文件后，请按照以下步骤操作：

稍微修改构建配置以向ionicons库添加新图标，然后在任何地方使用它们。
在项目中创建一个新文件夹以存储您的自定义图标，即src / assets / custom-ion-icons。
修改angular.json。查找此部分：

“资产”：

[
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "assets"
  },
  {
    "glob": "**/*.svg",
    "input": "node_modules/@ionic/angular/dist/ionic/svg",
    "output": "./svg"
  }
]

查看它如何将来自离子库的所有svg文件打包到“ ./svg”中？这些是默认图标。每当您使用默认图标之一时，您的应用就会在该输出目录中找到它。我们可以将自己的图标添加到该目录。向“资产”数组中添加一个对象，如下所示：

“资产”：

[
  {
    "glob": "**/*",
    "input": "src/assets",
    "output": "assets"
  },
  {
    "glob": "**/*.svg",
    "input": "node_modules/@ionic/angular/dist/ionic/svg",
    "output": "./svg"
  },
  {
    "glob": "**/*.svg",
    "input": "src/assets/custom-ion-icons",
    "output": "./svg"
  }
]

为每个新图标创建两个文件（一个用于iOS，一个用于android / material-design）。下面将创建一个名为“ newicon”的新图标： src / assets / custom-ion-icons / ios-newicon.svg src /资产/custom-ion-icons/md-newicon.svg svg图像应包含黑色填充的形状。笔划不会总是显示出来，具体取决于上下文。
最后修改您的app.module.ts文件，以设置默认的离子菜单按钮图标，如下所示：

从'@ ionic / angular'导入{IonicModule};

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      menuIcon: 'newicon'
    }),
    AppRoutingModule
  ],
  ...
})

在此示例中，我们应该有两个文件ios-newicon.svg和md-newicon.svg

希望这会有所帮助。

参考：

how to add custom svgs to ionic project

ionic config options

Answer 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>

以同样的方式，您还可以使用自定义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>

如何将defaut菜单图标更改为离子图像图标

6 个答案: