使用FontAwesome图标作为提交使用引导3.3.6按钮

网站和FontAwesome 4.6使用FontAwesome图标作为提交使用引导3.3.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是不可能的？

来源

2016-08-25 Andy

您需要使用'<按钮类型=“提交”>'或将在JavaScript功能触发表单提交动作。否则，你的代码看起来不错。 –

@ShekharChikara非常感谢你。将按钮类型更改为“提交”即可。 – Andy

乐意帮忙！我已发布我的评论作为答案，请接受。 –

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

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

干杯！

来源

2016-08-25 09:37:54

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

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

来源

2016-08-25 09:48:19 mean

使用FontAwesome图标作为提交使用引导3.3.6按钮

回答

相关问题