如何对齐按钮中剩余的大字形

Question

我正在使用Bootstrap 3制作一个按钮：

<a class="btn btn-primary btn-lg" href="#">
    <span class="glyphicon glyphicon-shopping-cart" style="font-size: xx-large"></span>
    Buy Now<br/>
    <span class="small">Instant and secure</span><br/>
</a>

正如我想的那样，字形很大。但我希望两行文字都向左推，以便为字形腾出空间。

我目前得到的是：

我的目标是：

我该怎么做？

Answer 1

您可以在图标中使用pull-left，并将btn更改为text-align:left：

CSS

.btn-lg {
  text-align:left;
  width:190px;
}

HTML

<a class="btn btn-primary btn-lg" href="#">
  <span class="glyphicon glyphicon-shopping-cart pull-left" style="font-size:xx-large;margin:5px;"></span> 
    Buy Now<br>
    <small>Instant and secure</small>
</a>

演示：http://bootply.com/86858