Aligné à droite font-impressionnante spinner

Question

Comment aligner à droite la fileuse de police-impressionnant, il sera sur le côté droit d'un bouton

Voici pas le code de travail:

 <div class="form-group row"> 
 
     <div class="offset-sm-2 col-sm-10"> 
 
      <button type="submit" class="btn btn-default">Sign up</button> 
 
      <div><i class="fa-li fa fa-spinner fa-spin"></i></div> 
 
     </div> 
 
     </div>

alors que le code ci-dessus fonctionne, la fileuse est toujours sur le côté gauche du bouton, essayez tant de façons différentes pour y parvenir

Answer 1

la classe fa-li est ce qui a été à l'origine du problème, il fait l'icône ont une position:absolute et sa position sur la gauche

Vous devez supprimer la classe.

et si vous voulez qu'il soit affiché dans le bouton que déplacer balise i intérieur button tag

voir extrait de code:

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="form-group"> 
 
    <div class="offset-sm-2 col-sm-10"> 
 
    <button type="submit" class="btn btn-default"> 
 
    Sign up <i class="fa fa-spinner fa-spin"></i> 
 
    </button> 
 
    </div> 
 
</div>

Ou tout simplement le mettre à l'extérieur et il sera à côté du bouton

Voir extrait de code:

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="form-group"> 
 
    <div class="offset-sm-2 col-sm-10"> 
 
    <button type="submit" class="btn btn-default"> 
 
     Sign up 
 
    </button> 
 
    <i class="fa fa-spinner fa-spin"></i> 
 
    </div> 
 
</div>