Bootstrap glyphicon after position

Question

The problem

I want to display a glyphicon icon after a text. In the documentation, there are only before examples as you can see here: http://getbootstrap.com/components/#glyphicons-examples

<div class="glyphicon glyphicon-chevron-right">Next</div>

My solutions

Solution 1

<div>Next<span class="glyphicon glyphicon-chevron-right"></span></div>

Solution 2

#next.custom-chevron-right:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

<div id="next" class="glyphicon custom-chevron-right">Next</div>

Source example: bootply

My question

Is there a better way to do it just with bootstrap classes?

Answer 1

There are 2 ways to typically add glyphicons (or any other icon font being used). The first way it to add them via html.

<div>Next <span class="glyphicon glyphicon-chevron-right"></span></div>
// Be sure to add a space in between your text and the icon

The second way it to do it using CSS. At a minimum, you must include the font-family and character code.

<div><span>Next</span></div>

span::after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

Obviously, using the CSS method you can then add additional styling but this example shows you the minimum needed to get thte icon to appear in the relative correct place.