センターの入力ボックスとフォントの素晴らしいアイコン

Question

他の人は同様の質問をしてきましたが、フォントの素晴らしいアイコンを入力ボックスに合わせて垂直に苦労しているようです。フォントの素晴らしいアイコンを増やすためにサイジングを使わないとうまくいきますが、fa-3xなどのように入力すると、マージントップが追加されます。

誰にもアイデアはありますか？

簡単な例は次のようになります。

<div> 
    <i class='icon icon-3x icon-camera'></i> 
    <span id="inputfield"> 
     <input type="text" value="input here"> 
    </span> 
</div> 

div { 
    border: 1px solid #ccc; 
    height: 30px; 
    margin: 60px; 
    padding: 4px; 
    vertical-align: middle; 
} 
i{ 
    float: left; 
} 
#inputfield{ 
    line-height: 30px; 
    float: left; 
} 

Answer 1

フレキシボックスは魔法で、フレキシボックスは、私たちの救世主です。

div{ 
 
    border : blue dashed 1px; 
 
    display : flex; 
 
    align-items : center; 
 
}

<div> 
 
    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-camera-128.png"/> 
 
    <input type="text" placeholder="input here"> 
 
</div>

Answer 2

あなたはフィドルhere

<div> 
    <i class='fa fa-camera'></i> 
    <span id="inputfield"> 
     <input type="text" value="input here"> 
    </span> 
</div> 

div { 
    border: 1px solid #ccc; 
    height: 30px; 
    margin: 60px; 
    padding: 4px; 
    vertical-align: middle; 
} 
i{ 
    float: left; 
} 
i.fa-camera{ 
    font-size:35px; 
} 
#inputfield{ 
    line-height: 30px; 
    float: left; 
} 

Answer 3

この でachivedことができますclass fa-3xを削除し、<i>というかcurrespondingクラス

に

をフォントサイズを与えることができますhtml

<div class="input-group"> 
    <i class='fa fa-3x fa-camera'></i> 
     <input type="text" value="input here"> 
</div> 

ここCSS

div.input-group 
{ 
    display:table; 
    margin:30px; 
} 

.input-group > input[type=text], 
.input-group > i.fa 
{ 
    display:table-cell; 
    vertical-align:middle; 
} 

.input-group > i.fa 
{ 
    line-height:20px; 
} 

は、私はそれが見えるようにするのdiv要素にマージンを追加した参照codepen link

ためのリンクです。このことができます

希望....

Answer 4

A（Notherの）フレキシボックスソリューション

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#inputfield { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    padding: 10px 0; 
 
} 
 

 
#inputfield::before { 
 
    font-family: FontAwesome; 
 
    font-size: 48px; 
 
    content: "\f030"; 
 
    margin: 0 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div> 
 
    <div id="inputfield"> 
 
    <input type="text" value="input here"> 
 
    </div> 
 
</div>

Answer 5

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
<form> 
 
<fieldset> 
 
<legend><i class="fa fa-user" aria-hidden="true"></i></legend> 
 
<input type="text" class="something"> 
 
</fieldset> 
 
</form>