离子离子导航按钮大小和风格

Question

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

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

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;
}

似乎要解决它，但也许还有更好的方法吗？！如果有帮助的话，我将把它留在这里......