我要在菜单栏中的每个部分的顶部添加我自己的图标，例如：家庭顶部的主页图标或汽车顶部的汽车图标等等，现在它显示在左侧 我尝试了所有建议的方法，但图标不会显示在菜单上。我怎么解决呢？ 这是我的代码：
.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>
<a href="" class="navbar-brand"><img src="http://www.sothink.com/page/logo-design/images/company-logo10.jpg" alt="" class="moto"></a>
</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><a href="/en" data-langname="English" id="en" class="changelang"><img src="http://findicons.com/files/icons/282/flags/48/united_states_of_america_usa.png" alt="" height="14" width="21"> English</a></li>
<li><a href="/ru" data-langname="Russia" id="ru" class="changelang"><img src="http://icons.iconarchive.com/icons/gosquared/flag/64/Russia-icon.png" alt="" height="14" width="21"> Russia</a></li>
</ul>
</li>
<li class="dropdown pull-right">
<a href="javascript:void(0);" class="show-submenu">My Account <b class="lightcaret mt-2"></b></a>
<ul style="display: none;" class="dropdown-menu">
<li><a href="/login"> Login</a></li>
<li><a href="/register"> Sign Up</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
我非常感谢并感谢你
答案 0 :(得分：0)
您使用了inline element，因此它们会显示在每个旁边。
你应该使用block elements来取消元素。
例如，向酒店添加<p>代码
<li class="go-right ">
<a href="m/hotels" class="" target="_self">
<i class='fa fa-building'></i><p>Hotels</p> </a>
</li>
如果你想要图标去按钮的中心：
将text-align:center;添加到font-awesome <i> tags的父类。
请参阅此链接并注意editfromStack：
http://jsbin.com/kewahadike/edit?output
或者您可以将<span>添加到hotel等字词，并在样式表上使用span{display:block;}