右侧按钮内的浮动图标

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%其置于任何所需的位置。