Codingjr Codingjr - 3 years ago 212
CSS Question

Bootstrap with image icons

I'm new to bootstrap and was wondering if anyone could help me.

I want a menu with icons only, but trying to do it won't let me.

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


I want to display icons instead of messages.

enter image description here

Thanks for all the help.

Answer Source

You can include bootstrap glyphicons as icons using the below markup. Instead of text, update to <i> tag with respective glyphicon.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download