Bootstrap与图像图标

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

您可以使用以下标记将bootstrap glyphicons作为图标包含在内。而不是文本，使用相应的glyphicon更新为<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>

＆＃13;

＆＃13;

<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">
	<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>

＆＃13;

＆＃13;

＆＃13;