Bootstrap联系表格7

时间:2016-04-05 09:56:14

标签: html twitter-bootstrap contact-form

我用代码发布了我的搜索结果的屏幕截图,以及我试图做的结果的屏幕截图。我试图将图标嵌入占位符,但似乎它不起作用。

    <div class="row">
<div class="col-md-6 col-sm-12">
    <label>Name</label>
    <div class="form-field">
        <i class="fa fa-user"></i>
        [text* name placeholder "Enter your name"]
    </div>
</div>
<div class="col-md-6 col-sm-12">
    <label>E-Mail</label>
    <div class="form-field">
        <i class="fa fa-envelope-o"></i>
        [email* email-78 placeholder "Enter your email"]
    </div>
</div>
</div>
<div class="row">
    <div class="col-md-6 col-sm-12">
        <label>Telephone <span style="color:#aaa">(Optional)</span></label>
        <div class="form-field">
            <i class="fa fa-phone"></i>
            [text text-74 placeholder "Enter your phone"]
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <label>Website <span style="color:#aaa">(Optional)</span></label>
        <div class="form-field">
            <i class="fa fa-globe"></i>
            [text text-985 placeholder "Enter your website"]
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <label>Message</label>
        <div class="form-field">
            <i class="fa fa-pencil-square-o"></i>
            [textarea textarea-197 placeholder "Enter your message"]
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        [submit class:btn class:btn-default "SEND YOUR MESSAGE"]
    </div>
</div>

我的结果是:My results

我想要完成此任务:I want to accomplished

谢谢

1 个答案:

答案 0 :(得分:0)

查找以下示例,它可能会对您有所帮助。

<强> HTML

<input type="text" class="form-control iconDsp" placeholder="&#xf007;"/>

<强> CSS 在下面的代码.iconDsp类中,它将FontAwesome font-family链接到显示图标

input.iconDsp{
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}