web-dev-qa-db-ja.com

Bootstrap glyphicon after position

問題

テキストの後にグリフィコンアイコンを表示したい。ドキュメントでは、ここに見られるように、例の前にのみあります： 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

私の質問

bootstrapクラスだけでそれを行うより良い方法はありますか？

htmlcsstwitter-bootstrapglyphicons
14
aleixfabra

通常、グリフィコン（または使用されている他のアイコンフォント）を追加する方法は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を使用してそれを行う2番目の方法。少なくとも必須（font-familyおよび文字コード。

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

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

もちろん、CSSメソッドを使用してスタイルを追加できますが、この例では、アイコンを相対的に正しい場所に表示するために最低限必要なものを示しています。

27
Joe Conlin

最初の解決策が最良の解決策です。 Bootstrapとにかくあなたがグリフィコンをあなたのウェブサイトに置く方法だからです）

2
Runtuk