html - Ionic ion-nav-buttons 大小和样式

Question

我正在尝试制作具有全尺寸标题高度的 ionic 导航按钮。我想要这个

但在下面我得到了这个，不太正确:第一个按钮填充标题高度，但第二个按钮在标题内保持填充(注意:标题背景为白色)。

html

  <ion-nav-buttons side="left" >
    <button class="icon button-custom ion-navicon" menu-toggle="left">
    </button>
  </ion-nav-buttons>

CSS

.button-custom,
.button-custom.icon:before{
  font-size: 34px !important;
  border-style: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
  padding: 0;
  background-color: #ed4949;
  color: white;
}

是否可以使第二个图像样式与第一个图像样式相同？

Answer 1

将 css 更改为:

.button-custom,
.button-custom.icon:before{
  font-size: 34px !important;
  border-style: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #ed4949;
  color: white;
}
.button-custom {
    margin: -5px 0 -5px -5px!important;
}

似乎可以修复它，但也许有更好的方法？!为了将来引用，我会把它留在这里，如果它对任何人有帮助......