html - 如何对齐按钮左侧的大字形

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