【问题标题】：Style font awesome icon to the right of input输入右侧的样式字体真棒图标
【发布时间】：2016-04-16 07:54:33
【问题描述】：

很难将此图标强制放在输入的右侧而不是放在下方。已更改 col 编号，放入 div 等。但没有。这是它现在的样子：

我的代码是（示例不显示关闭表单标记）：

    <form class="pptReg" role="form" name="pptReg" novalidate>
        <h1 style="padding-top: 60px; color: #ab2328;">Participant Information</h1>
        <div class="form-group col-md-3 naviaInp" style="padding-top: 30px;">
            <label for="empCode">Employer Code</label>
            <input type="text" name="empCode" class="form-control" id="empCode" data-ng-model="pptregistration.coCode" ng-required="true" maxlength="3" autofocus ng-blur="getEmpIdType(true);">
            <a class="questionIcon" href="#"><i class="fa fa-question-circle col-md-2 fa-2x" style="float: right;"></i></a>
            <div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) && pptReg.empCode.$error.required">
                <p class="claimError"><i class="fa fa-exclamation-circle"></i><span>This is a required field.</span></p>
            </div>
            <div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) && empIdType == ''">
                <p class="claimError"><i class="fa fa-exclamation-circle"></i><span>The Employer Code is invalid.</span></p>
            </div>
        </div>

它只是一个很棒的字体图标，我试图添加到那里的输入右侧。我正在使用 Bootstrap 3 进行布局。

想法或建议（我自己脑子里想了很多！）？

非常感谢。

【问题讨论】：

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

首先，您需要限制输入的宽度，以便在其旁边有足够的空间放置图标。然后您还需要将输入和图标设置为display:inline-block;，从图标中删除col-md-2 类，因为它是不必要的。最后，在图标上添加vertical-align:middle;，使其与输入垂直对齐。

HTML：

<form class="pptReg" role="form" name="pptReg" novalidate="">
    <h1 style="padding-top: 60px; color: #ab2328;">Participant Information</h1>
    <div class="form-group col-md-3 naviaInp" style="padding-top: 30px;">
        <label for="empCode">Employer Code</label>
        <input type="text" name="empCode" class="form-control" id="empCode" data-ng-model="pptregistration.coCode" ng-required="true" maxlength="3" autofocus="" ng-blur="getEmpIdType(true);">
        <a class="questionIcon" href="#"><i class="fa fa-question-circle col-md-2 fa-2x"></i></a>
        <div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) &amp;&amp; pptReg.empCode.$error.required">
            <p class="claimError"><i class="fa fa-exclamation-circle"></i><span>This is a required field.</span></p>
        </div>
        <div ng-show="(pptReg.$submitted || pptReg.empCode.$touched) &amp;&amp; empIdType == ''">
            <p class="claimError"><i class="fa fa-exclamation-circle"></i><span>The Employer Code is invalid.</span></p>
        </div>
    </div>
</form>

CSS：

.form-control {
  display:inline-block;
  width:90%;
}
a.questionIcon {
  display:inline-block;
  vertical-align:middle;
}

Bootply

【讨论】：

【解决方案2】：

.form-control 类将 empCode 输入作为块元素。您需要为输入添加样式以允许其他元素与其位于同一行（即float:left; display:inline-block;）。

【讨论】：

好的想法和他们的作品，但是该死的，现在的响应能力都被扭曲了。如果这不是一件事，那是另一件事……哈哈……

【解决方案3】：

在问号后面加display: inline;如下：

<a class="questionIcon" href="#"><i class="fa fa-question-circle col-md-2 fa-2x" style="float: right; display:inline;"></i></a>

【讨论】：