html - 如何在没有 Bootstrap 的情况下向输入框添加字体超棒的图标？

Question

我想在表单输入中包含一个超棒的字体图标，但我在寻找解决方案时遇到了问题。在这个网站上查看只会给出有 bootstrap 的问题，所以我包括了一个没有 bootstrap 的问题。我尝试改编来自 this answer 的代码但对齐已关闭。我该如何解决这个问题？

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

Answer 1

根据您希望输入的大小，您可以为输入添加额外的填充:

.left-addon input {
    padding: 8px 5px 8px 30px;
}

或者您可以减少 font-awesome 图标上的填充:

.inner-addon .fa {
    position: absolute;
    padding: 3px 6px;
    pointer-events: none;
}

.inner-addon {
  position: relative;
}
.inner-addon .fa {
  position: absolute;
  padding: 3px 6px;
  pointer-events: none;
}
.left-addon .fa  { left:  0px;}
.left-addon input  { padding-left:  30px; }

.inner-addon-tall input {
  padding: 8px 5px 8px 30px;
}
.inner-addon-tall .fa {
  padding: 10px;
}

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

<div class="inner-addon left-addon">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>
<br/><br/>
<div class="inner-addon left-addon inner-addon-tall">
  <i class="fa fa-adn"></i>      
  <input type="text" class="form-control" placeholder="Username" />
</div>

或者您可以根据您想要的高度将它们组合起来。