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

【问题标题】：Bootstrap align icon to leftside of buttonBootstrap 将图标对齐到按钮的左侧
【发布时间】：2018-12-13 15:52:44
【问题描述】：

我有一个 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 时，它会将文本也向右移动（应保持居中）。

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

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

嗯，请看 sn-p 它可以解决您的问题。在新添加的类选择器 left-icon-holder 上使用 position。

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

【讨论】：

对我有用 - 看起来股票字形图标可以按照我的意图使用 pull-left，但字体真棒给我带来了麻烦。

【解决方案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>

【讨论】：