Бутстрап глификон после позиции

Эта проблема

Я хочу отображать значок глифика после текста. В документации есть только примеры перед тем, как вы можете увидеть здесь: 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.

Другие вопросы по тегам