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

Posted 2021-04-09

我有以下代码：

<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的说明，但没有运气。

答案

存在解决问题的简单方法，只需输入你的.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。

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

我希望这些信息对您有用。

另一答案

去做就对了！ :)

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

使用class =“”属性来设置自定义图标..在这种情况下，我使用了离子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/