Aligner l'icône au-dessus du texte à l'intérieur de la balise du bouton

Question

Comment puis-je aligner l'icône à l'intérieur d'un bouton en haut du texte, il est actuellement sur le côté gauche du texte. Je ne peux pas comprendre comment.

Voici le code

<div class='nav'> 
 
    <button class="home btn"> 
 
     <i class="btnIcon fa fa-home"></i> 
 
     <span>HOME</span> 
 
    </button> 
 
</div>

Answer 1

La méthode la plus simple serait de déclarer que la durée de display:block

span { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class='nav'> 
 
    <button class="home btn"> 
 
    <i class="btnIcon fa fa-home"></i> 
 
    <span>HOME</span> 
 
</button> 
 
</div>

Ou utiliser Flexbox et la colonne mise en page

.btn.vertical { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class='nav'> 
 
    <button class="home btn vertical"> 
 
    <i class="btnIcon fa fa-home"></i> 
 
    <span>HOME</span> 
 
</button> 
 
</div>