如何将字体真棒图标插入这样的输入按钮？

Question

我有这个代码，但我不能在按钮中间插入图标？

请看这里： http://jsfiddle.net/fsbqv3z4/

<input type="button" id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"/>

Answer 1

<button id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"> <i class="fa fa-times fa-lg"></i></button>

你能试试这个吗？ 希望对你有帮助）

Answer 2

您可以使用按钮标签代替输入，因为这样，您可以使用任何文本、图像或其中的任何内容，如以下代码所示。

<button id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"><i class="fa fa-times fa-lg"></i></button>

但是，如果您要使用输入，则图像标签我将不会进入该按钮。

Answer 3

为什么不简单地将<input>更改为<a>标记，并将formaction更改为href ？ 似乎是这里的合理解决方案。 锚需要添加.btn class：

<a id="google-search" name="btnI" href="https://www.google.com/search?q=adprizes%2B+" class="btn searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar">
<i class="fa fa-times fa-lg"></i>
</a>

http://jsfiddle.net/afuhvp1g/

注意：由于sameorigin ，该链接将永远不会在 jsfiddles iframe 中工作。

Answer 4

您可以使用 flex-box 到 position 项目 例如：如果您想 position 中间按钮内的任何内容，您可以使用下面的 css

 .searchButton2{ display:flex; align-items:center; justify-content:center; max-width: 130px; width: 50px; height: 45px; border: 3px solid red; background: #28b9ed; text-align: center; color: #fff; cursor: pointer; font-size: 14px; outline: none; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <button type="button" id="google-search" name="btnI" formaction="https://www.google.com/search?q=adprizes%2B+" class="searchButton2" data-toggle="tooltip" data-placement="top" title="&nbsp;Pesquisar"> <i class="fa fa-search" aria-hidden="true"></i> </button>