Bootstrap 将图标对齐到按钮的左侧

Question

我有一个 bootstrap 3 按钮，它使用很棒的字体作为图标。我试图将按钮上的文本居中，但将图标与左侧对齐。

<button type="button" class="btn btn-default btn-lg btn-block">
  <i class="fa fa-home pull-left"></i> Home
</button>

当我使用 时pull-left，没有填充或边距，因此图标太靠近边缘（图 1）。

但是，当我尝试向图标添加margin-left或padding-left时，它也会将文本移动到右侧（应保持居中）。

在这些图标上使用边距或填充时，有没有办法不将文本推倒？

Answer 1

嗯，请查看它可以解决您的问题的代码片段。用于position新添加的类选择器left-icon-holder。

.left-icon-holder {
    position:relative;
}
.left-icon-holder .fa {
    position:absolute;
    line-height: 24px;
    top:50%;
    margin-top: -12px; /* Half of line height to keep left middle postion of container */
    left: 10px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<button type="button" class="btn btn-default btn-lg btn-block left-icon-holder">
  <i class="fa fa-home"></i> Home
</button>