如何在 bootstrap 导航栏菜单顶部添加图标

Question

我要在菜单栏每个部分的顶部添加我自己的图标，例如：首页图标在主页顶部，或汽车图标在汽车顶部，以及等等，现在显示在左侧我尝试了所有建议的方法，但图标没有显示在菜单顶部。我该如何解决？
这是我的代码：

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

我非常感谢你

Answer 1

您使用了 inline element，因此它们显示在每个旁边。你应该使用 block elements 来删除元素。例如，将 <p> 标签添加到 Hotels

<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 的父级 class。请查看此 link 并通知 editfromStack ： http://jsbin.com/kewahadike/edit?output

或者您可以将 <span> 添加到 hotel 之类的词中，然后在样式表

上使用 span{display:block;}

请看这个link： http://jsbin.com/kumuvenanu/edit?html,output

如何在 bootstrap 导航栏菜单顶部添加图标

How to add icon on top of bootstrap navbar menu

css

icons

navbar

twitter-bootstrap-3