html - How to add own icons in bootstrap navbar -


working on project, started on navbar. thing wondering if possible add own icons right next each of menu bars ? example icons: https://www.dropbox.com/sh/0be3c7ub4245kd6/znmrvfi6wq

like this:

enter image description here

code:

<!-- fixed navbar -->     <div class="navbar navbar-default navbar-fixed-top" role="navigation">       <div class="container">         <div class="navbar-header">           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">             <span class="sr-only">toggle navigation</span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>           </button>           <a class="navbar-brand" href="#">project name</a>         </div>         <div class="navbar-collapse collapse">           <ul class="nav navbar-nav">             <li class="active"><a href="#">home</a></li>             <li><a href="#about">about</a></li>             <li><a href="#contact">contact</a></li>            </ul>          </div><!--/.nav-collapse -->       </div>     </div>      <div class="container">        <!-- main component primary marketing message or call action -->       <div class="jumbotron">         <h1>navbar example</h1>         <p>this example quick exercise illustrate how default, static , fixed top navbar work. includes responsive css , html, adapts viewport , device.</p>         <p>to see difference between static , fixed top navbars, scroll.</p>         <p>           <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">view navbar docs &raquo;</a>         </p>       </div>      </div> <!-- /container -->

here's way without adding additional markup, though need add unique classes each of anchor links.

css:

.navbar-default .navbar-nav>.active>a:before, .navbar-nav>li>a:before {     background-repeat: no-repeat;     background-position: 0 top;     content: "";     display: inline-block;     height: 29px;     margin-right: 10px;     vertical-align: middle;     width: 29px; }  .navbar-default .navbar-nav>.active>a.home:before, .navbar-nav>li>a.home:before { background-image: url('https://dl.dropboxusercontent.com/sh/0be3c7ub4245kd6/18xnfucw14/home.png'); }  .navbar-default .navbar-nav>.active>a.about:before, .navbar-nav>li>a.about:before {  background-image: url('https://dl.dropboxusercontent.com/sh/0be3c7ub4245kd6/dhxion5yil/kveld.png'); }  .navbar-default .navbar-nav>.active>a.contact:before, .navbar-nav>li>a.contact:before {  background-image: url('https://dl.dropboxusercontent.com/sh/0be3c7ub4245kd6/_fidqgglas/sol.png'); }

you can view result here: http://jsfiddle.net/2wvpv/

you'll need play around margins , padding. also, isn't perfect because should use relative sizing rather pixels.


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more