2016-05-26 7 views
-1

私は新しいウェブデザイナーです。私は適切なアイコンを使ってブートストラップで応答性の高いナビゲーションバーを設計するのに苦労しています。 あなたは次のメニューオプションのためにどのアイコンを使用すべきか教えてください。このNavbarを適切なアイコンでブートストラップで設計するにはどうすればいいですか?

は、ここに私の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> 
+1

[Font Awesome icons](http://fontawesome.io/icons/)も使用すると、より広いアイコンカタログが得られます – tektiv

答えて

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よりも設計されています。

関連する問題