html - 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>

Answer 2

您使用伪元素来显示图标：

button::before{
	position: absolute;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-weight: 900; 
	content: "\f015";
	left: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>

<button type="button" class="btn btn-default btn-lg btn-block">Home</button>