在输入类型文本中包含令人敬畏的字体答案

【问题标题】：Include font awesome inside input type text在输入类型文本中包含令人敬畏的字体
【发布时间】：2014-03-20 23:12:25
【问题描述】：

我正在尝试在左侧的输入中包含一个 Font Awesome，但我没有成功。我从来没有为此目的使用过很棒的字体。有谁知道如何在输入中包含字体？谢谢！

我尝试在输入左侧包含的字体：

  <i class="fa fa-user"></i>

我的html：

<form action="" method="post">
       <input type="text"class="inputs" placeholder="e-mail" /> 
       <br />
       <input type="password" class="inputs"placeholder="Password"  />

</form>

我的 CSS：

 inputs:-webkit-input-placeholder { 
        color:    #b5b5b5; 
    } 

    inputs-moz-placeholder { 
        color:    #b5b5b5; 
    } 

     .inputs  { 
        background: #f5f5f5; 
        font-family:"bariol_regularregular", Palatino, serif;
        -moz-border-radius: 3px; 
        -webkit-border-radius: 3px; 
        border-radius: 3px; 
        border: none; 
        padding: 13px 10px; 
        width:180px; 
        margin-bottom: 10px; 
        box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 ); 
        height:20px;
    } 

    .inputs:focus { 
        background: #fff; 
        box-shadow: 0px 0px 0px 2px #96842E; 
        outline: none;    
    }

【问题讨论】：

您希望图标在用户输入电子邮件时保留在那里吗？
感谢您的回答，是的，我想要！

标签： css icon-fonts

【解决方案1】：

这可以通过一些绝对定位来实现。有两种不同的方法我可以想到这样做，所以我会告诉你。摆弄这两个例子here

方法一

HTML

<label id="email-label">
    <input type="text" id="email" placeholder="email here" />
</label>

CSS

#email {
    padding-left: 20px;
}
#email-label {
    position: relative;
}
#email-label:before {
    color: #666;
    content:"\f007";
    font-family: FontAwesome;
    position: absolute;
    top: 2px;
    left: 5px;
}

方法二

HTML

<label id="email-label2">
    <i class="fa fa-rocket"></i>
    <input type="text"id="email2" placeholder="email here" />
</label>

CSS

#email-label2 {
    position: relative;
}

#email-label2 .fa-rocket {
    color: #666;
    top: 2px;
    left: 5px;
    position: absolute;
}

#email2 {
    padding-left: 20px;
}

【讨论】：

谢谢伙计..它有效！我需要研究相对位置和固定位置，因为我还不太了解！再次感谢您的帮助:)

【解决方案2】：

我的目的是：

HTML

<i class="inside fa fa-user"></i>
<input type="text" class="inp" placeholder="Your account" />

CSS

.inside {
position:absolute;
text-indent:5px;
margin-top:2px;
color:green;
}

.inp {
text-indent:20px;
}

https://jsfiddle.net/ga6j5345/1/

【讨论】：