HTML-кнопка с иконкой поиска?

Я пытаюсь создать кнопку поиска, содержащую ничего, кроме значка поиска увеличительного стекла.HTML-кнопка с иконкой поиска?

код ниже

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

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

После прочтения всех сообщений на эту тему я мог бы найти, я также попытался следующие 3 варианта в строке 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/ и http://www.youtube.com/watch?v=BdyI6T-_7ts

Любая помощь в том, что я делаю неправильно, будет очень признательна.

источник

2013-11-13 user2632376

Ну, вы совершенно правы с CSS. Попробуйте это, возможно, эта работа. Я не уверен в этом.

<input type="button" value="" id="searchButton" />

Добавить CSS:

#searchButton: 
{ 
    background:url('filepath') no-repeat no-repeat; 
    width: 20px; 
    height: 20px; 
    border: 0px; 
}

источник

2013-11-13 04:30:06

спасибо за попытку Вир. Это дало мне то, что у меня было раньше, окно поиска и пустую кнопку. Я ценю время, которое вы взяли. – user2632376

Ну, это не должно дать вам пустую кнопку. У него должен быть фон. –

является то, что вы ищете http://jsfiddle.net/cancerian73/t2FJb/

<div class="search-bar"> 
<input type="text" class="sfield" name="searchterm" maxlength="30" value="Search..."> 
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">

.search-bar { 
height: 29px; 
background-color: #e1e1e1; 
-moz-border-radius: 100px; 
-webkit-border-radius: 100px; 
border-radius: 100px; 
position:relative; 
width:230px 
} 
.search-bar .searchbutton { 
position:absolute; 
top:23%; 
right:5px; 
} 
.sfield { 
float: left; 
margin: 5px 0 0 8px; 
font: 8pt Verdana; 
color: #888; 
height: 20px; 
line-height: 18px; 
padding: 0; 
background: transparent; 
border: 0; 
max-width: 125px 
}

источник

2013-11-13 04:30:43 San

Я не знаю, что я делаю неправильно. Я отредактировал свой div div и соответствующий css, затем скопировал и вставил ваши html и css, и он дал мне пустую форму поиска. Спасибо, что нашли время, хотя Сан, это очень ценится. – user2632376

вам удалось решить проблему? – San

Фоновый сокращённое свойство упоминанием ed by veer может быть проигнорирован браузером, поскольку «no-repeat» записывается дважды. Попробуйте написать его так:

background: url ("") no-repeat fixed center;

также проверьте путь, указанный вами в URL-адресе. если ваши изображения находятся в отдельной папке, вам может потребоваться добавить «../».

P.S. Хотя это может быть и не нужно для вашего случая, это хорошая практика, чтобы упомянуть свойства, такие как background-position (center in above case). Иногда в противном случае все свойство игнорируется браузером. Я не уверен, однако, почему это не происходит, я не уверен, что это на самом деле проблема, или это была какая-то другая ошибка в моем коде. Не всегда, но я столкнулся с этой проблемой 2-3 раза.

источник

2015-08-17 05:48:26

Вы можете использовать значки от Glyphicons или Font-Awesome, которые полезны при использовании иконок.

Вот пример, используя glyphicon поисковой иконку

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

Или используя значок поиска шрифтов Высокого

-х

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

источник

2015-12-31 07:32:55

HTML-кнопка с иконкой поиска?

ответ

Смежные вопросы