Wie positioniert man das Glypicon auf der linken Seite des Bootstrap-Buttons?

Question

Dieser Code positioniert den linken Pfeil rechts den Text. Ich bevorzuge es, das Glyphon auf der linken Seite zu positionieren.

<button class="btn primary btn-lg" style="width:100%" > 
    This way <span class="glyphicon glyphicon-arrow-left" style="align:left"></span> 
</button> 

danken, dass Sie

Answer 1

Die span helfen ist, was die Glyphicon anzeigt. Setzen Sie den span zuerst vor den Text, und es wird so nach links wie positioniert werden:

<button class="btn primary btn-lg" style="width:100%" > 
    <span class="glyphicon glyphicon-arrow-left style="align:left" "></span> 
    This way 
</button> 

Answer 2

Zunächst einmal width:100% in Bootstrap nutzlos ist. Sie sollten col-lg-12, col-md-12, col-sd-12 oder col-xs-12 verwenden, die dem Element eine Breite von 100% geben.

Zweitens das Symbol auf der linken Seite zu setzen, müssen Sie zuerst in der Schaltfläche wie dies den span Tag setzen:

<button class="btn primary btn-lg col-lg-12"><span class="glyphicon glyphicon-arrow-left style="align:left" "></span> This way</button> 

Answer 3

Ich denke, es keine Eigenschaft align in CSS benannt ist. Verwenden Sie text-align für Inline-Elemente. oder float links/rechts für das Element und overflow:hidden für den Eltern-/Clearfix-Hack oder display:flex mit justify-content: flext-start.

Answer 4

Platzieren Sie einfach den span vor dem Text. Die Eigenschaft "align" ist unnötig (und wie gesagt, keine Sache :)).

<button type="button" class="btn btn-default btn-lg"> 
    <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> This Way 
</button> 

JSFiddle: https://jsfiddle.net/v49kj8sw/

Dokumentation: http://getbootstrap.com/components/#glyphicons-examples