web-dev-qa-db-fra.com

Bootstrap glyphicon après la position

Le problème

Je souhaite afficher une icône de glyphicon après un texte. Dans la documentation, il n'y a qu'avant des exemples comme vous pouvez le voir ici: http://getbootstrap.com/components/#glyphicons-examples

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

Mes 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>

Exemple source: bootply

Ma question

Existe-t-il une meilleure façon de le faire simplement avec les classes bootstrap?

htmlcsstwitter-bootstrapglyphicons
14
aleixfabra

Il existe généralement deux façons d'ajouter des glyphicons (ou toute autre police d'icône utilisée). La première façon de les ajouter 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

La deuxième façon de le faire en utilisant CSS. Au minimum, vous devez inclure la famille de polices et le code de caractère .

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

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

Évidemment, en utilisant la méthode CSS, vous pouvez ensuite ajouter un style supplémentaire, mais cet exemple vous montre le minimum nécessaire pour que l'icône apparaisse à l'endroit correct.

27
Joe Conlin

Votre première solution est la meilleure solution. Il n'y a vraiment aucun intérêt à le faire d'une autre manière car c'est ainsi que vous mettez des glyphicons sur votre site Web avec Bootstrap de toute façon

2
Runtuk