Как создать этот Navbar в Bootstrap с соответствующими значками?

Question

Я новый веб-дизайнер, и сейчас я борюсь за разработку адаптивного навигатора в бутстрапе с соответствующими значками. Не могли бы вы рассказать мне, какие значки я должен использовать для следующих параметров меню?

Вот мой HTML код:

<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><a href="#">Services</a></li> 
          <li><a href="#">Time Series</a></li> 
          <li><a href="#">Profile</a></li> 
          <li><a href="#">Place Order</a></li> 
          <li><a href="#">FAQ</a></li> 
          <li><a href="#">About</a></li> 
          <li><a href="#">Contact</a></li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Action</a></li> 
            <li><a href="#">Another action</a></li> 
            <li><a href="#">Something else here</a></li> 
            <li role="separator" class="divider"></li> 
            <li class="dropdown-header">Nav header</li> 
            <li><a href="#">Separated link</a></li> 
            <li><a href="#">One more separated link</a></li> 
           </ul> 
          </li> 
         </ul> 
        </div> 
        <!--/.nav-collapse --> 
       </div> 
       <!--/.container-fluid --> 
      </nav> 

Answer 1

Первый раз, когда я вижу запрос, как это ..
Вы дизайнер, вы должны делать все, что вы хотите, и не нужны советы от других.

Но так как вы спросили его, вот то, что вы могли бы начать с: 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><a href="#"><i class="glyphicon glyphicon-th"></i> Services</a></li> 
         <li><a href="#"><i class="glyphicon glyphicon-calendar"></i> Timeline</a></li> 
         <li><a href="#"><i class="glyphicon glyphicon-user"></i> Profile</a></li> 
         <li><a href="#"><i class="glyphicon glyphicon-inbox"></i> Place a Request</a></li> 
         <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> FAQ</a></li> 
         <li><a href="#"><i class="glyphicon glyphicon-info-sign"></i> About</a></li> 
         <li><a href="#"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-wrench"></i> Admin <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
           <li role="separator" class="divider"></li> 
           <li class="dropdown-header">Nav header</li> 
           <li><a href="#">Separated link</a></li> 
           <li><a href="#">One more separated link</a></li> 
          </ul> 
         </li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-bullhorn"></i> Support <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Action</a></li> 
           <li><a href="#">Another action</a></li> 
           <li><a href="#">Something else here</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
       <!--/.nav-collapse --> 

И, как я заметил, вы могли бы использовать Font Awesome Icons, чтобы получить более широкий каталог, и IMO они лучше разработаны, чем glyphicons Bootstrap в.