CODEWITHSUNDEEP
twitter-bootstrap
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

BOOTSTRAP nav list with prepended icons text align

I would like to add a simple icon to my navbar menu items with bootstrap:

this is the code:

<div class="span4 well">
        <ul class="nav nav-list">
            <li class="nav-header">Recent news</li>
                        <li><a href="/news/introducing-new-apps-for-timeline"><i class="icon icon-play"></i> Introducing New Apps for Timeline</a></li>
            <li class="divider"></li>
                        <li><a href="/news/do-you-shake-your-tea"><i class="icon icon-play"></i> Do you shake your tea?</a></li>
            <li class="divider"></li>
                        <li><a href="/news/new-delta-sky-club-opens"><i class="icon icon-play"></i> New Delta Sky Club Opens at LaGuardia’s Terminal C</a></li>
            <li class="divider"></li>
                        <li><a href="/news/love-is-in-the-air"><i class="icon icon-play"></i> Love is in the Air</a></li>
            <li class="divider"></li>

        </ul>
    </div>

if you check THIS FIDDLE, you'll see it doesn't look pretty when the text is more than a line long... how can I align text (both rows)? I adding

Upvotes: 0

Views: 2004

Answers (1)

Rolando Garc&#237;a
Rolando Garc&#237;a

Reputation: 171

Try using a negative text indent on your anchors. 

ul.nav li a {
  text-indent: -20px;
  padding-left: 35px;
}

See results here: http://jsfiddle.net/GdaPN/2/

Upvotes: 4

Related Questions