Загрузочный глификон после позиции

Проблема

Я хочу отобразить значок глификона после текста. В документации есть только перед примерами, которые вы можете увидеть здесь: http://getbootstrap.com/components/#glyphicons-examples

<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

Мой вопрос

Есть ли лучший способ сделать это только с помощью классов начальной загрузки?

Ответы

Ответ 1

Есть два способа типичного добавления глификонов (или любого другого шрифта значка). Первый способ добавить их через 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 вы можете добавить дополнительный стиль, но этот пример показывает минимальный размер, необходимый для того, чтобы значок появился в относительном правильном месте.

Ответ 2

Ваше первое решение - лучшее решение. На самом деле нет никакого смысла делать это другим способом, как то, как вы добавляете глификоны на свой сайт с Bootstrap в любом случае