我有以下代码:
<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 .
注意: ionic 博客在某种程度上建议使用图标字体,但从我的 Angular 来看,当图标很少时没有意义。请阅读此link .
希望这些信息对您有用。
关于css - 如何在后退按钮中获取自定义图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27917844/