CSS 如何在后退按钮中获取自定义图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27917844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a custom icon in a back button?
提问by redrom
I have following code:
我有以下代码：
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-chevron-left" ng-click="goBack()"></button>
</ion-nav-buttons>
Which producing following output:
其中产生以下输出：
I would like to change used icons for the custom icon (48×48 px).
我想更改自定义图标（48×48 像素）的已用图标。
How can I do it in right way in Ionic?
我怎样才能在 Ionic 中以正确的方式做到这一点？
I tried to follow the instructions in this topic, but without luck.
我尝试按照本主题中的说明进行操作，但运气不佳。
回答by Gaston Flores
Exist easy way to solve your problem, just put in your .js this:
现有的简单方法可以解决您的问题，只需在您的 .js 中输入：
$ionicConfigProvider.backButton.icon('my-back-button');
(Please see $ionicConfigProvider documentation here)
（请参阅此处的$ionicConfigProvider 文档）
and your css:
和你的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;
}
You can run this example in this LINK
您可以在此LINK 中运行此示例
Another solution can be this (using only CSS):
另一个解决方案可以是这样的（仅使用 CSS）：
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
and your css:
和你的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;
}
See this example here.
在此处查看此示例。
Note: A ionic blog in some way suggests using icon-fonts, but from my point does not make sense when there are few icons. Please read this link.
注意： ionic 博客在某种程度上建议使用图标字体，但从我的角度来看，当图标很少时没有意义。请阅读此链接。
I hope this information is useful to you.
我希望这些信息对你有用。
回答by Helcio R. Macedo Pandelo
Just do it! :)
去做就对了！:)
<ion-nav-back-button class="button-clear ion-chevron-left">
</ion-nav-back-button>
Use the class="" attribute to set your custom icon.. In this case, i have used the ion-chevron-left (to be like your example)..!
使用 class="" 属性设置您的自定义图标.. 在这种情况下，我使用了 ion-chevron-left（就像您的示例一样）..！
But if you want to change the default text too.. you can do it different:
但是如果你也想改变默认文本..你可以做不同的：
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> Back Text
</ion-nav-back-button>
Ref: http://ionicframework.com/docs/api/directive/ionNavBackButton/
参考：http: //ionicframework.com/docs/api/directive/ionNavBackButton/
回答by Sandeep Modak
It may be late for the answer but for the latest version of ionic(5.4.16) at this date following way would save much time
答案可能会迟到，但对于目前最新版本的 ionic(5.4.16) 而言，以下方式将节省大量时间
<ion-nav-buttons side="left">
<button text="" icon="chevron-back-outline" ng-click="goBack()"></button>
</ion-nav-buttons>
hope it will help someone
希望它会帮助某人
