离子中按钮文本旁边的定位图标答案

【问题标题】：Positioning icon next to button text in ionic离子中按钮文本旁边的定位图标
【发布时间】：2018-01-08 04:30:40
【问题描述】：

我需要在按钮文本旁边放置复选标记图标。图标在点击事件时显示/隐藏，取决于按钮是否被点击。我设法把它放在里面并在点击时显示或隐藏它，但是当我显示它时，图标将按钮文本向左推了一点。并且按钮文本应该固定在按钮的中间，并且对勾图标应该出现在空白处，而不是向左推按钮文本。

它应该是这样的：

这是我目前得到的：

如您所见，“02:00 AM”向左推了一点，但不应该如此。

    <button ion-button [color]="i.active
        ? 'primary'
        : 'light'
      "
        block
        (click)="onToggleReminder(i)">
        <span>
          {{i.label}}
        </span>
        <ion-icon name="checkmark" float-right [hidden]="!i.active"></ion-icon>
      </button>


     .button {
        border-radius: 16px;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: bold;
        height: 45px;
     }
     span {
        margin-right: 5px;
     }

【问题讨论】：

你改变了margin-right值吗？
@ShinoyShaji 是的，那个边距在那里，所以我在按钮文本和图标之间留了一点空间。即使我删除了该边距，图标也会将文本向左推一点，并且它们彼此靠近

标签： css button ionic-framework position icons

【解决方案1】：

问题是图标默认有一些宽度，因为它会将按钮文本推到左侧。所以解决方案是我将图标的宽度指定为 1px，这足以将其放置在按钮文本旁边，而无需将其推到左侧并仍然使图标可见。

    ion-icon {
      width: 1px;
    }

【讨论】：

【解决方案2】：

嗯，我认为这些图标的大小很明显不同。可以试着把它变小吗？

【讨论】：

尽管这不是一个真正的解决方案，但您的回答帮助我找到了解决方案，所以我对您的回答投了赞成票。