CSS - 将 FontAwesome 图标与文本输入中的图标对齐答案

【问题标题】：CSS - aligning FontAwesome icons with an icon inside a text inputCSS - 将 FontAwesome 图标与文本输入中的图标对齐
【发布时间】：2018-02-13 21:48:14
【问题描述】：

我已经设置了一个小提琴，所以你可以看到发生了什么：https://jsfiddle.net/5p9ve8xr/1/

我要做的是使 3 个社交媒体图标（.fa-linkedin、.fa-twitter、.fa-facebook）与搜索图标的中心水平对齐（@987654328@）

社交媒体图标都有一个.social 类。所以我尝试使用填充和边距来定位它们，例如

.social {
    margin-top: 20px;
}

但这只是将所有元素向下推 20 像素。

我附上了一张截图来说明这一点。我希望图标使绿色和洋红色占据的空间量相等 - 即图标正好位于搜索输入的中心：

这是代码的副本 - 以防它在任何时候都不在 jsfiddle 上...

标记：

    <div class="row">
        <div class="col-md-12" style="border:1px solid red">
                <form action="#" class="form-inline">
                    <div class="form-group">
                        <input type="text" size="30" placeholder="Search" class="form-control input-lg">
                        <i id="filtersubmit" class="fa fa-search fa-2x"></i>


                         <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x social" aria-hidden="true"></i></a>
                         <a href="#" target="_blank"><i class="fa fa-twitter fa-2x social" aria-hidden="true"></i></a>
                         <a href="#" target="_blank"><i class="fa fa-facebook fa-2x social" aria-hidden="true"></i></a>
                    </div>
                </form>
        </div>
     </div>

CSS：

#filtersubmit {
    position: relative;
    z-index: 1;
    left: -42px;
    top: 5px;
    color: #7B7B7B;
    cursor:pointer;
    width: 0;
}

图书馆：

引导程序 3.3.7
FontAwesome
jquery 1.12.4

【问题讨论】：

我已经用我所有的代码发布了一个小提琴？！
冷静下来。我已经将代码复制到这里...
我很平静，虽然有点醉了:)，谢谢。
您是否尝试将fa-fw 添加到每个图标的类中？ fontawesome.io/examples

标签： html css twitter-bootstrap

【解决方案1】：

我可能会稍微调整一下你的结构

.form-search--social {
    float: right;
    padding: 8px 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="row">
	<div class="col-md-12" style="border:1px solid red">
		<form action="#" class="form-inline form-search">
			<div class="form-group">
				<div class="input-group">
					<input type="text" size="30" placeholder="Search" class="form-control input-lg">
					<span class="input-group-addon">
						<i id="filtersubmit" class="fa fa-search fa-2x"></i>
					</span>
				</div>
				
				<div class="form-search--social">
					<a href="#" target="_blank"><i class="fa fa-linkedin fa-2x fa-fw social" aria-hidden="true"></i></a>
					<a href="#" target="_blank"><i class="fa fa-twitter fa-2x fa-fw social" aria-hidden="true"></i></a>
					<a href="#" target="_blank"><i class="fa fa-facebook fa-2x fa-fw social" aria-hidden="true"></i></a>
				</div>
			</div>
		</form>
	</div>
</div>

而且因为它在 SOs 代码框中显得很奇怪；为了避免任何潜在的混淆，这里是最终结果的 Bootply：https://www.bootply.com/dmC7mKGr1L

【讨论】：