我如何在没有引导程序的情况下将超棒字体图标添加到输入框？

Question

我想在表单输入中包含超棒的字体图标，但是在寻找解决方案时遇到了问题。 在该站点上查找仅会引发bootstrap的问题，因此我将包含一个不包含bootstrap的问题。 我尝试根据此答案改编代码，但对齐方式已关闭。 我怎样才能解决这个问题？

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

或者，您可以减少字体真棒图标上的填充：

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

或者，您可以根据需要的高度将它们组合在一起。

Answer 2

实际上，此从将Bootstrap Glyphicon添加到Input Box的代码使用的是Bootstrap中的样式表，因此输入的高度不同。简单的方法是将padding值更改为3px。

 .inner-addon { position: relative; } .inner-addon .fa { position: absolute; padding: 3px; //Change this 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>