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

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

问题在于图标的字体大小大于圆形按钮。您可以将 font-size 减小到 24px 并将 line-height 减小到相同的值，以使图标完全适合圆圈内。增加了覆盖选择器的特异性以避免!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;
  }
}