css – 如何在后退按钮中获取自定义图标?

前端之家收集整理的这篇文章主要介绍了css – 如何在后退按钮中获取自定义图标?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下代码
<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.

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

原文链接:https://www.f2er.com/css/215431.html

猜你在找的CSS相关文章