How to design this Navbar in Bootstrap with the proper icons? - html

Question

I am a new web designer and I am struggling right now in designing a responsive navbar in bootstrap with the proper icons. Could you please tell me which icons I should use for the following menu options?
Here's my HTML Code:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i> Home</a></li>
<li>Services</li>
<li>Time Series</li>
<li>Profile</li>
<li>Place Order</li>
<li>FAQ</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Admin <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>

Answer 1

First time I see a request like this .. You're the designer, you should do whatever you want and don't need advices from others.
But since you asked it, here something you could start with : http://www.bootply.com/jePKaJ3ebg
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><i class="glyphicon glyphicon-th"></i> Services</li>
<li><i class="glyphicon glyphicon-calendar"></i> Timeline</li>
<li><i class="glyphicon glyphicon-user"></i> Profile</li>
<li><i class="glyphicon glyphicon-inbox"></i> Place a Request</li>
<li><i class="glyphicon glyphicon-question-sign"></i> FAQ</li>
<li><i class="glyphicon glyphicon-info-sign"></i> About</li>
<li><i class="glyphicon glyphicon-envelope"></i> Contact</li>
<li class="dropdown">
<i class="glyphicon glyphicon-wrench"></i> Admin <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-bullhorn"></i> Support <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
And as I commented, you could use Font Awesome Icons to get a wider catalog, and IMO they are better designed than Bootstrap's glyphicons.