中心输入框和 Font Awesome 图标答案

【问题标题】：Center Input box and Font Awesome icons中心输入框和 Font Awesome 图标
【发布时间】：2017-06-07 11:41:38
【问题描述】：

其他人也问过类似的问题，但我似乎很难将字体真棒图标与输入框垂直对齐。当你不使用大小来增加字体真棒图标时，它可以正常工作，但是一旦你输入 fa-3x 或类似的东西，margin-top 就会被添加。

有人有什么想法吗？

简单的例子是：

<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;
}

【问题讨论】：

轻松修复。移除 fa-3x。为 i.fa-camera 设置 font-size:35px 或 3 倍正常{}

标签： javascript css font-awesome

【解决方案1】：

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

【讨论】：

【解决方案2】：

Flexbox 是神奇的，Flexbox 是我们的救星。

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>

【讨论】：

【解决方案3】：

可以通过这个实现 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;
}

这里是参考链接codepen link

我已为 div 元素添加边距以使其可见。

希望这会有所帮助....

【讨论】：

【解决方案4】：

您可以删除 class fa-3x 并将字体大小指定给 <i> 或更确切地说是当前类

找到小提琴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;
}

【讨论】：

【解决方案5】：

一个（其他）弹性盒解决方案

* {
  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>

【讨论】：