Geek Answers Handbook

Unable to get link align icon in navbar

I’m having trouble figuring out how to get the icon next to the link in my navigator and whether to line it up correctly.

<ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Link</a><span class="badge badge-important">4</span></li>

Here is a JSFiddle example of my problem: http://jsfiddle.net/pHRc9/3/

+6
source share
3 answers

Try closing href close out of range.

 <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Link <span class="badge badge-important">4</span></a></li>

Updated Answer

You did not indicate this in your question. Using code that you already exist and posting this css works fine for me.

 a { float:left !important; } span { float: left !important; margin-top: 10px; }
+4
source

Not sure why you need an icon outside the link, as the whole link becomes a block. The best way to have icons on the right is similar to lostintranslation , but instead of using .badge-important use .pull-right .

+2
source

I do this to mark the icons as list items:

  %ul.nav.navbar-nav.navbar-right %li.navbar-text %span.badge boo %li.navbar-text %span.label.label-primary foo

It seems nice to me.

+1
source

More articles:


All Articles