右侧按钮内的浮动图标

Question

我在按钮内放置了一个图标。要将图标与按钮右侧对齐，我在图标上使用float: right。但正如您所看到的，这会导致Firefox上的图标溢出，因此我需要另一种解决方案。

注意事项

1. 我希望按钮中的文字居中对齐，因此在文本中添加float: left不是一个选项
2. 图标需要浮动到按钮右侧

这是图标和按钮的Sass：

.icon-icomoon
    font-family: 'icomoon' !important
    speak: none
    font-style: normal
    font-weight: normal
    font-variant: normal
    text-transform: none
    line-height: 1
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale

.icon-arrow-right:before
    content: "\e910"

.btn
    border-radius: 0
    padding: 20px 40px
    font-weight: 600
    font-family: $fontSansSerif
    font-size: 1.9em

    span.icon-arrow-right
        float: right
        font-size: 40px

.mobile-and-tablet-only
    display: none

    @media screen and (max-width: $mediaBreakpointTablet)
        display: block

.desktop-only
    display: none

    @media screen and (min-width: $mediaBreakpointTablet+1)
        display: block

以下是按钮的HTML：

<a href="#" class="btn btn-success">
  <span class="desktop-only">
    Let's make something awesome together
    <span class="icon-icomoon icon-arrow-right"></span>
  </span>
  <span class="mobile-and-tablet-only">
    Let's work together
    <span class="icon-icomoon icon-arrow-right"></span>
  </span>
</a>

以下是Chrome浏览器中的内容：



这就是Firefox上的样子。如您所见，文本的宽度为100％，导致图标溢出：

Answer 1

尝试提供a.btn position:relative，然后绝对定位span.icon-arrow-right（position: absolute）。然后，您可以通过向其添加right: 3%; top: 33%来为箭头图标指定任何所需位置。

Answer 2

您可以尝试在按钮内嵌块内部进行跨距（以防止跨越100％的按钮宽度）。另外，请不要忘记将clearfix用于浮动范围的父容器（.btn）。

.btn {
  text-align: center;
  @include clearfix();

  > span {
    display: inline-block;

    &.icon-icomoon {
      float: right;
    }
  }
}

@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

Answer 3

你可以在你的范围内使用:after

btn {
   position:relative;
}
span{
  text-align:center;
}
span:after {
       content: url(myicon.png);

}

通过这种方式，你不需要这个

<span class="icon-icomoon icon-arrow-right"></span>

example example 2

或者您可以使用display：inline-block，以％为单位给出宽度。您也可以使用display:flex。

Answer 4

喜欢这个。

span{
  font-size:16px
}

img{
  vertical-align:-15%;
}

<button>
  <span>My Text</span>
  <img src="https://rack.pub/media/bitcoin.png" height="16px" >
</button>