Faire flotter l'icône à l'intérieur du bouton vers la droite

Question

Je positionne une icône à l'intérieur d'un bouton. Pour aligner l'icône sur la droite du bouton, j'utilise la commande float: right sur l'icône. Mais comme vous le verrez, cela fait déborder l'icône sur Firefox, il me faut donc une autre solution.

Points à noter

1. Je veux que le texte du bouton soit aligné au centre, donc en ajoutant float: left au texte n'est pas une option
2. L'icône doit être flottante à droite du bouton.

Voici le Sass pour l'icône et le bouton :

.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

Voici le HTML pour le bouton :

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

Voici à quoi cela ressemble dans le navigateur sur Chrome :

Et voici à quoi cela ressemble sur Firefox. Comme vous pouvez le constater, la largeur du texte est de 100 %, ce qui fait que l'icône déborde :

Answer 1

Essayez de donner à la a.btn position:relative puis de positionner le span.icon-arrow-right absolument ( position: absolute ). Ensuite, vous pouvez donner à l'icône de la flèche la position que vous souhaitez en ajoutant right: 3%; top: 33% à elle.

Answer 2

Vous pouvez essayer de faire en sorte que les espaces à l'intérieur du bouton soient des blocs en ligne (pour éviter qu'ils ne couvrent 100 % de la largeur du bouton). N'oubliez pas non plus d'utiliser la fonction clearfix pour le conteneur parent ( .btn ) de la travée flottante.

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

  > span {
    display: inline-block;

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

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

Answer 3

Vous pouvez utiliser :after sur votre portée

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

}

De cette façon, vous n'avez pas eu besoin de cette

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

exemple exemple 2

OU vous pouvez utiliser display : inline-block en leur donnant une largeur en %. Vous pouvez également utiliser display:flex .

Answer 4

Comme ça.

span{
  font-size:16px
}

img{
  vertical-align:-15%;
}

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