帶圖像圖標的Bootstrap

我是bootstrap的新手，想知道是否有人可以幫助我。帶圖像圖標的Bootstrap

我想要一個只有圖標的菜單，但試圖做到這一點不會讓我。

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

我想顯示的圖標，而不是消息。

感謝您的幫助。

來源

2017-09-30 Codingjr

請提供[最小，完全，可覈查示例]（https://stackoverflow.com/help/mcve） – bhansa

你是什麼意思的圖標，而不是消息？你能提供一個你希望導航項目會是什麼樣子的例子嗎？ – TidyDev

你的嘗試在哪裏？ –

您可以使用下面的標記將引導程序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>

來源

2017-09-30 20:52:01

帶圖像圖標的Bootstrap

回答

相關問題