使用 FontAwesome 图标作为提交按钮

Question

使用 Bootstrap 3.3.6 和 FontAwesome 4.6 的网站

我有一个由文本字段和按钮组成的搜索表单。我只想为按钮使用 FontAwesome 图标 fa-search (http://fontawesome.io/icon/search/)。

我的标记是这样的。这种呈现方式看起来很完美，但单击时按钮不提交表单：

<form method="post" action="/somewhere">
<div class="col-lg-4 pull-right">    
            <div class="input-group">
                <input type="text" name="keywords" id="keywords" class="form-control" maxlength="100" autocomplete="off" placeholder="Search...">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
              </span>
            </div>
        </div>
</form>

为什么这不起作用？不能在提交按钮或其他东西上使用 FontAwesome 吗？

Answer 1

您需要将 button 类型更改为 submit 而不是 button，因为这将有助于触发表单 submit 事件。所以，你的 HTML 应该看起来像这样-

<button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>

干杯！

Answer 2

您也可以试试这个而不是按钮标签

<label for="submitBtn" class="btn btn-default"><i class="fa fa-search"></i></label>
    <input id="submitBtn" type="submit" class="hidden" />

使用 FontAwesome 图标作为提交按钮

Using FontAwesome icons as submit buttons

twitter-bootstrap

font-awesome