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

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类：

<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

您可以使用弹性框来定位项目 例如：如果你想在中间的按钮内放置任何东西，你可以使用以下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>