带有搜索图标的 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

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

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>