使用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按鈕

回答

相關問題