如何使用Ionic Framework图标在SASS中设置圆角按钮？

Question

我想设置一个圆形按钮，中间有一个离子图标。

我有类似的东西：

button {
    color: white;

    &.button-rounded {
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border: 2px solid white;
        border-radius: 50%;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 10px;
        font-weight: bold;
    }
}

和html：

<button class="button button-clear icon ion-home button-rounded"></button>

但结果是这样的：

请帮忙吗？

Answer 1

问题在于图标的字体大小比圆形按钮大。您可以将字体大小减小到24px，将行高减小到相同的值，以使图标完全适合圆圈。提高重写选择器的特异性以避免!important

.bar .buttons .button.button-icon .icon::before, .bar .buttons .button.button-icon::before, .bar .buttons .button.button-icon.icon-left::before, .bar .buttons .button.button-icon.icon-right::before {
  font-size: 24px;
  line-height: 24px;
}

Updated Codepen

SASS版本：

.bar .buttons .button.button-icon {
  .icon::before, &::before, &.icon-left::before, &.icon-right::before {
    font-size: 24px;
    line-height: 24px;
  }
}