代码之家 › 专栏 › 技术社区 › SBB

引导对齐图标到按钮的左侧

twitter-bootstrap-3 css html

SBB · 技术社区 · 7 年前

我有一个bootstrap3按钮,它的图标使用了令人敬畏的字体。我试图将按钮上的文本居中,但将图标与左侧对齐。

<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

当在这些图标上使用边距或填充时,有没有办法不将文本推到上方?

2 回复 | 直到 7 年前

Hanif 7 年前

嗯,请看片段,它可以解决你的问题。习惯于 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>

Jasper Mulder 7 年前

使用伪元素显示图标:

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>