如何在后退按钮中获取自定义图标？答案

【问题标题】：How to get a custom icon in a back button?如何在后退按钮中获取自定义图标？
【发布时间】：2020-12-21 21:48:39
【问题描述】：

我有以下代码：

<ion-nav-buttons side="left">
    <button class="button button-icon icon ion-chevron-left" ng-click="goBack()"></button>
</ion-nav-buttons>

产生以下输出：

我想将使用的图标更改为自定义图标（48×48 像素）。

我怎样才能在 Ionic 中以正确的方式做到这一点？

我尝试按照this topic 中的说明进行操作，但没有运气。

【问题讨论】：

标签： css ionic-framework icons

【解决方案1】：

存在解决您问题的简单方法，只需在您的 .js 中添加以下内容：

 $ionicConfigProvider.backButton.icon('my-back-button');

（请参阅 $ionicConfigProvider 文档here）

还有你的 CSS：

.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 35px;
}

你可以在这个LINK中运行这个例子

另一种解决方案可以是这样（仅使用 CSS）：

  <ion-nav-back-button class="button-clear">
    <i class="button button-icon my-back-button"></i>
  </ion-nav-back-button>

还有你的 CSS：

.my-back-button {
content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 48px;
}

请参阅此示例here。

注意：一个 ionic 博客在某种程度上建议使用图标字体，但从我的观点来看，当图标很少时没有意义。请阅读此link。

希望这些信息对你有用。

【讨论】：

【解决方案2】：

去做吧！ :)

<ion-nav-back-button class="button-clear ion-chevron-left">
</ion-nav-back-button>

使用 class="" 属性来设置您的自定义图标。在这种情况下，我使用了 ion-chevron-left（就像您的示例一样）..！

但是如果你也想改变默认文本..你可以做不同的：

<ion-nav-back-button class="button-clear">
   <i class="ion-chevron-left"></i> Back Text
</ion-nav-back-button>

参考：http://ionicframework.com/docs/api/directive/ionNavBackButton/

【讨论】：

【解决方案3】：

如果您使用的是 ionic 5

<ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button icon="chevron-back-outline"></ion-back-button>
    </ion-buttons>
    <ion-title class='text-center toolbar-text'>Title</ion-title>
  </ion-toolbar>

【讨论】：

【解决方案4】：

答案可能为时已晚，但对于目前最新版本的 ionic(5.4.16) 以下方式会节省很多时间

<ion-nav-buttons side="left">
    <button text="" icon="chevron-back-outline" ng-click="goBack()"></button>
</ion-nav-buttons>

希望对某人有所帮助

【讨论】：