带搜索图标的HTML按钮? [英] HTML button with search icon?

问题描述

我正在尝试创建一个搜索按钮，除了放大镜搜索图标外什么都没有.

I'm trying to create a search button containing nothing but the magnifying glass search icon.

代码在下面

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

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

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

After reading all the posts on the topic I could find I've also tried the following 3 options in line 4

<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/和

None of them have worked. I've also updated font awesome based on these tutorials http://cirquedumot.com/font-awesome/ and http://www.youtube.com/watch?v=BdyI6T-_7ts

对于我在做错事情的任何帮助，将不胜感激.

Any help on what I'm doing wrong would be much appreciated.

推荐答案

您可以使用 Glyphicons 中的图标，也可以使用字体令人敬畏，对于图标设计的使用非常有用.

You may use icons from Glyphicons or Font-Awesome, which are useful for icon design usage.

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

Here's an example, using glyphicon's search icon

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

或使用Font Awesome的搜索图标

Or using Font Awesome's search icon

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

这篇关于带搜索图标的HTML按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！