CSS - Symbol über Text

Question

Ich habe diesen HTML meine Navigation zeigen:

<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav mainMenu"> 
     <li><a href="#"><span class="glyphicon glyphicon-dashboard"></span><span class="menuText">Menu1</span></a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-home"></span><span class="menuText">Menu2</span></a></li> 
      ... 
    </ul>   
</div> 

Meine Navigation wie folgt aussieht:

Jetzt habe ich das Symbol über den Text haben wollen, aber irgendwie ist es nicht so einfach, dachte ich. Hat jemand eine Idee, wie man das auf einfache Weise macht?

Answer 1

Fügen Sie display:block zu Ihren Spannen hinzu, damit sie zu neuen Zeilen umbrechen.

Ex:

.glyphicon { 
 
    display: block; 
 
}

<div class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav mainMenu"> 
 
    <li><a href="#"><span class="glyphicon glyphicon-dashboard">a</span><span class="menuText">Menu1</span></a></li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-home">b</span><span class="menuText">Menu2</span></a></li> 
 
    ... 
 
    </ul> 
 
</div>

Ref

Answer 2

Code unten versuchen.

.collapse { 
 
    display: block !important; 
 
} 
 
.mainMenu li { 
 
    display: inline-block !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav mainMenu"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-dashboard"></span><span class="menuText">Menu1</span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-home"></span><span class="menuText">Menu2</span></a></li> 
 
      ... 
 
    </ul>   
 
</div> 
 

 
<div class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-dashboard"></span><span class="menuText">Menu1</span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-home"></span><span class="menuText">Menu2</span></a></li> 
 
      ... 
 
    </ul>   
 
</div>