CSS - 對齊FontAwesome圖標，文本輸入

我已經成立了一個小提琴，所以你可以看到裏面的圖標是怎麼回事：https://jsfiddle.net/5p9ve8xr/1/CSS - 對齊FontAwesome圖標，文本輸入

我想要做的就是讓這個3社會媒體圖標（.fa-linkedin，.fa-twitter，.fa-facebook）水平與搜索圖標（.fa-search）

社會媒體的圖標都具有一類.social的中心對齊。所以我試着用填充和邊距來對準它們，例如

.social { 
    margin-top: 20px; 
}

但是，這只是推動所有的元素向下20px。

我附上了截圖來說明這一點。我想要的圖標，使得空間由綠色和品紅色佔據的量等於 - 即圖標是完全在搜索輸入的中心：

下面的代碼的副本 - 的情況下，它不是在任何時候的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

來源

2017-09-05 Andy

我已經發布了所有代碼的小提琴？！ – Andy

冷靜下來。我已將代碼複製到這裏... – Andy

我很平靜，雖然有點醉了:)，謝謝你。 –

我可能會調整結構，不斷所以，稍微

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

而且因爲它在SOs代碼框中變得怪異;以避免任何潛在的混淆這裏是最終結果的Bootply：https://www.bootply.com/dmC7mKGr1L

來源

2017-09-05 15:03:12

CSS - 對齊FontAwesome圖標，文本輸入

回答

相關問題