Question

我试图在左侧输入中包含一个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;    
    }

Answer 1

这可以通过一些绝对的位置来实现。我可以通过两种不同的方式来做这个，所以我会告诉你们两个。摆弄两个例子here

方法1

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

方法2

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

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

在输入类型文本中包含字体真棒

2 个答案: