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

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

我有这样的想法：

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>

但结果是这样的：

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

---

有什么帮助吗？

问题在于图标的字体大小大于圆形按钮。您可以将字体大小减小到24px，并将线条高度减小到相同的值，以使图标正好位于圆圈内。增加了覆盖选择器的特殊性，以避免

！重要信息

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

SASS版本：

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

---

你能用它创建一个Codepen.io演示吗？事实是我以前从未使用过Codepen.io…：-（没问题，你只需要通过一个演示来复制你的问题。你可以使用这里的代码片段或JSFIDLE，或者任何对你来说更简单的东西。不使用sass：你能举一个使用sass的例子吗？在sass中它对我不起作用。我认为理想的解决方案是创建一个新的类。我不希望标题的所有正确按钮都被删除。）四舍五入。是的，分配一个新类以不影响其他按钮。我尝试创建一个新类但未成功，这就是我在stackoverflow中询问的原因。您的解决方案在我的情况下不起作用。：-'（它在“我的代码笔”链接中起作用。与“我的代码”一起创建您的最新版本，以检查哪些不起作用。您的解决方案是使标题中的所有按钮都变小：-（查看您的代码笔。。。