Бутстрап глификон после позиции
Эта проблема
Я хочу отображать значок глифика после текста. В документации есть только примеры перед тем, как вы можете увидеть здесь: http://getbootstrap.com/components/
<div class="glyphicon glyphicon-chevron-right">Next</div>
Мои решения
Решение 1
<div>Next<span class="glyphicon glyphicon-chevron-right"></span></div>
Решение 2
#next.custom-chevron-right:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
}
<div id="next" class="glyphicon custom-chevron-right">Next</div>
Исходный пример: bootply
Мой вопрос
Есть ли лучший способ сделать это только с помощью классов начальной загрузки?
2 ответа
Есть 2 способа добавить глифы (или любой другой используемый значок шрифта). Первый способ это добавить их через HTML.
<div>Next <span class="glyphicon glyphicon-chevron-right"></span></div>
// Be sure to add a space in between your text and the icon
Второй способ это сделать с помощью CSS. Как минимум, вы должны включить семейство шрифтов и код символа.
<div><span>Next</span></div>
span::after {
font-family: 'Glyphicons Halflings';
content: "\e080";
}
Очевидно, что с помощью метода CSS вы можете добавить дополнительные стили, но этот пример показывает вам минимум, необходимый для того, чтобы значок появился в относительно правильном месте.
Ваше первое решение - лучшее решение. На самом деле нет никакого смысла делать это по-другому, потому что так или иначе вы помещаете глифы на свой сайт с помощью Bootstrap.