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

Question

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.

Answer 1

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;
}

Answer 2

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/

Answer 3

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