画像のアイコン付きブートストラップ

Question

私はブートストラップには新しく、誰かが私を助けてくれるのだろうかと思っていました。

私はアイコンだけのメニューが欲しいですが、それをやろうとしても私は許されません。

マイHTML：

<div class="container"> 
    <ul class="nav nav-pills"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Notifications</a></li> 
    <li><a href="#"> Discover</a></li> 
    <li><a href="#">Messages</a></li> 
    </ul> 
</div> 

私はアイコンの代わりに、メッセージを表示したいです。すべての助けを

感謝。

Answer 1

以下のマークアップを使用して、ブートストラップglyphiconsをアイコンとして含めることができます。テキストの代わりに、<i>タグをそれぞれのグリフコンで更新します。

は

<div class="container"> 
    <ul class="nav nav-pills"> 
     <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i></a></li> 
     <li><a href="#"><i class="glyphicon glyphicon-ok"></i></a></li> 
     <li><a href="#"> <i class="glyphicon glyphicon-info-sign"></i></a></li> 
     <li><a href="#"><i class="glyphicon glyphicon-folder-open"></i></a></li> 
    </ul> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 

 
<div class="container"> 
 
\t <ul class="nav nav-pills"> 
 
\t \t <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i></a></li> 
 
\t \t <li><a href="#"><i class="glyphicon glyphicon-ok"></i></a></li> 
 
\t \t <li><a href="#"> <i class="glyphicon glyphicon-info-sign"></i></a></li> 
 
\t \t <li><a href="#"><i class="glyphicon glyphicon-folder-open"></i></a></li> 
 
\t </ul> 
 
</div>