在输入标签中放置一个字体超棒的图标 [英] Put a font-awesome icon inside an input tag

问题描述

我试图在输入标签中放置一个Font-awesome图标。

这是我的 HTML 代码：

 < div class =input-group> 
< input class =form-controltype =passwordplaceholder =Password> 
< span class =input-group-addon>< i class =fa fa-key fa-fw>< / i>< / span> 
< / div> 
  

但是该图标比输入框大，如图所示：

如何修复图标？

解决方案

Bootstrap 3

结帐

 < / c> / examples /＃bootstraprel =nofollow noreferrer> Bootstrap examples  ; div class =input-group margin-bottom-sm> 
< span class =input-group-addon>< i class =fa fa-envelope-o fa-fw>< / i>< / span> 
< input class =form-controltype =textplaceholder =电子邮件地址> 
< / div> 
< div class =input-group> 
< span class =input-group-addon>< i class =fa fa-key fa-fw>< / i>< / span> 
< input class =form-controltype =passwordplaceholder =Password> 
< / div> 
  

它应该是开箱即用的，所以如果您仍然存在身高差异，请检查是否没有其他可以覆盖你的 input-group-addon height

的CSS材料使用JSFiddle： https://jsfiddle.net/vs0wpy80

Bootstrap 4

Bootstrap 4引入了一些输入组的新类，我们需要使用 input-group-prepend 和 input-group-append ：

 < div class =input-group mb-3> 
< div class =input-group-prepend> 
< span class =input-group-text>< i class =fa fa-envelope-o fa-fw>< / i>< / span> 
< / div> 
< input class =form-controltype =textplaceholder =电子邮件地址> 
< / div> 
 
< div class =input-group mb-3> 
< input class =form-controltype =textplaceholder =电子邮件地址> 
< div class =input-group-append> 
< span class =input-group-text>< i class =fa fa-envelope-o fa-fw>< / i>< / span> 
< / div> 
< / div> 
  

使用JSFiddle： https://jsfiddle.net/8do9v4dp/5/

I'm trying to put a Font-awesome icon inside an input tag.

This is my HTML code:

<div class="input-group">
        <input class="form-control" type="password" placeholder="Password">
        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
</div>

But that icon is bigger than input box as you can see in this picture:

How can I fix the icon?

解决方案

Bootstrap 3

Checkout the Bootstrap examples in the Font Awesome documentation:

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

It should work out of the box, so if you still have height differences, check that there is not other CSS stuff that override your input-group-addon height

Working JSFiddle: https://jsfiddle.net/vs0wpy80

Bootstrap 4

Bootstrap 4 introduced some new classes for input groups, we need to use input-group-prepend and input-group-append:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
  <input class="form-control" type="text" placeholder="Email address">
</div>

<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Email address">
  <div class="input-group-append">
    <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
  </div>
</div>

Working JSFiddle: https://jsfiddle.net/8do9v4dp/5/

这篇关于在输入标签中放置一个字体超棒的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！