带有搜索图标的 HTML 按钮？

Question

我正在尝试创建一个只包含放大镜搜索图标的搜索按钮。

代码如下

<div class="searchbox">
<form>
    <span><input type="text" class="search square" placeholder="Search...">
            <input type="button" value="&#xf002;">

</span>
</form>
</div>

在阅读了关于该主题的所有帖子后，我发现我还在第 4 行中尝试了以下 3 个选项

<input type="button" value="filepath/icon.png">
<i class="icon-search icon-2x">
<i class="icon-search"></i></button>

以及这个 html

 <input type="button" value="Search" class="button_add">

有了这个CSS

 input.button_add {
    background-image: url(filepath/icon.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    border: none;
    cursor: pointer;
    height: 50px;
    width: 50px;
    padding-left: 16px;
    vertical-align: middle;
}

他们都没有工作。我还根据这些教程更新了很棒的字体 http://cirquedumot.com/font-awesome/ 和 http://www.youtube.com/watch?v=BdyI6T-_7ts

对我做错的任何帮助将不胜感激。

原文由 user2632376 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用来自 Glyphicons 或 Font-Awesome 的图标，它们对图标设计使用很有用。

这是一个例子，使用 glyphicon 的搜索图标

<button class="icon"><i class="glyphicon glyphicon-search"></i></button>

或者使用 Font Awesome 的搜索图标

<button class="icon"><i class="fa fa-search"></i></button>

原文由 Jeff Hu 发布，翻译遵循 CC BY-SA 3.0 许可协议