How to add icon on top of bootstrap navbar menu - css

Question

I'm gonna add my own icons on top of each section in menubar, for example: Home icon on top of home, or Car icon on top of Cars, and etc, now it's showing in left side
I tried all suggested ways but icons don't show on top of menu. how can I solve it?
Here is my code:
.navbar-wrapper2{min-height:0px; background:white; border-bottom:0px solid #cccccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.13); padding-bottom:0px;}
#media (min-width: 992px) {
.navbar-wrapper2{min-height:110px; background:white; border-bottom:0px solid #cccccc; box-shadow: 0 0 5px rgba(0, 0, 0, 0.13); padding-bottom:0px;}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top navbar-default ">
<div class="container">
<div class="navbar">
<!-- Navigation-->
<div class="navbar-header go-right">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://www.sothink.com/page/logo-design/images/company-logo10.jpg" alt="" class="moto">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right go-left">
<li class="dropdown active go-right">
<a class="dropdown-toggle" href=""> Home </a>
</li>
<li class="go-right ">
<a href="m/hotels" class="" target="_self">
<!--<i class='fa fa-building'></i>--> Hotels </a>
</li>
<li class="go-right ">
<a href="/tours" class="" target="_self">
<!--<i class='fa fa-briefcase'></i>--> Tours </a>
</li>
<li class="go-right ">
<a href="/cars" class="" target="_self">
<!--<i class='fa fa-car'></i>--> Cars </a>
</li>
<li class="go-right ">
<a href="/offers" class="" target="_self">
<!--<i class='fa fa-gift'></i>--> Offers </a>
</li>
<li class="go-right ">
<a href="/blog" class="" target="_self">
<!--<i class='fa fa-building'></i>--> Blog </a>
</li>
<li class="go-right ">
<a href="/flightsd" class="" target="_self">
<!--<i class='fa fa-building'></i>--> Flights </a>
</li>
<li class="go-right ">
<a href="/contact-us" class="" target="">
<!--<i class='glyphicon glyphicon-phone-alt'></i>--> Contact </a>
</li>
<form class="dropdown pull-right">
<div class="styled-select">
<select onchange="change_currency(this.value)" class="selectx" style="margin-top:10px;font-weight: 100;height: 2.3em;" name="currency" id="currency">
<option value="1" selected="">US Dollar</option>
<option value="3">GB Pound</option>
<option value="9">SR Saudi</option>
</select>
</div>
<div class="clearfix"></div>
</form>
<li class="dropdown pull-right">
<a style="border-bottom: 0px;" href="javascript: void();" class="dropdown-toggle" data-toggle="dropdown"><img src="/uploads/images/language/en.png" alt="English" height="14" width="21"> English </a>
<ul style="display: none;" class="dropdown-menu">
<li><img src="http://findicons.com/files/icons/282/flags/48/united_states_of_america_usa.png" alt="" height="14" width="21"> English</li>
<li><img src="http://icons.iconarchive.com/icons/gosquared/flag/64/Russia-icon.png" alt="" height="14" width="21"> Russia</li>
</ul>
</li>
<li class="dropdown pull-right">
My Account <b class="lightcaret mt-2"></b>
<ul style="display: none;" class="dropdown-menu">
<li> Login</li>
<li> Sign Up</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I highly appreciate it and thank you

Answer 1

you used inline element, so they are showed beside of each.
you should use block elements to take element down.
for example add <p> tag to Hotels
<li class="go-right ">
<a href="m/hotels" class="" target="_self">
<i class='fa fa-building'></i><p>Hotels</p> </a>
</li>
and if you want icons go center of buttons:
add text-align:center; to the parent class of font-awesome <i> tags.
please see this link and notice to editfromStack :
http://jsbin.com/kewahadike/edit?output
or you can add <span> to words like hotel and use span{display:block;} on stylesheet
please see this link:
http://jsbin.com/kumuvenanu/edit?html,output