4

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

2 回答 2

13

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

方法一

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;
}
于 2014-03-21T14:52:58.430 回答
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/

于 2015-09-06T12:37:29.870 回答