CODEWITHSUNDEEP
csstwitter-bootstrap
kyrisu
kyrisu

Reputation: 4653

How to make bootstrap icon display inline with text in a tag?

I have bootstrap navigation pill that shows text and an arrow. Unfortunately if the text is to long the arrow appears on the border of the anchor. Html looks like this.

        <a href="#">
          <span> Some longer sample text</span>
          <i class="pull-right icon-chevron-right"></i>
        </a>

Demo is here: http://jsfiddle.net/kyrisu/FNcGX/

How can I display it inline with the block of text (text can/should wrap)?

Upvotes: 15

Views: 89862

Answers (3)

ShibinRagh
ShibinRagh

Reputation: 6656

Please use this structure 

<a href="#">
       <i class="pull-right icon-chevron-right"></i>
      <span> Some longer sample text</span>

    </a>

Please demo http://jsfiddle.net/FNcGX/9/

Upvotes: 3

Surinder ツ
Surinder ツ

Reputation: 1788

Using css white-space:nowrap; solves text in one line issue.

.subject-pill > a {
    border-style: solid;
    border-width: 1px;
    white-space:nowrap;
}
 .subject-pill{ 
    width: 218px;
 }

reference site : white space no wrap

Upvotes: 0

000
000

Reputation: 3950

If your text can wrap as you said then this can work..

<span><i class="pull-right icon-chevron-right"></i>Some longer sample text</span>

Update:

<span class="iwt">
<span>Some longer sample text</span>
<i class="pull-right icon-chevron-right"></i>
</span>

.iwt{
display:block;
}

Upvotes: 13

Related Questions