Есть форма поиска с кнопкой submit имеющей в background картинку лупы. Данную картинку необходимо поменять на иконку любым из доступных способов. Иконка вставляется с помощью специального шрифта:
.
Как это можно реализовать? Сломал уже всю голову.
#search{font-family:Helvetica Neue, Helvetica, Arial, sans-serif;background:#111;width:8px;max-width:93%;padding:0 8px;height:23px;font-size:14px;color:#fff;line-height:24px;border:0;outline:none;border-radius:50px;position:relative;z-index:5;-moz-transition:.1s ease;-ms-transition:.1s ease;-webkit-transition:.1s ease;-o-transition:.1s ease;transition:.1s ease;cursor:pointer;display:table-cell}
#search:focus{border:0;background:#444;height:26px;padding:0 10px;outline:none;width:300px}
p.s{z-index:4;position:relative;padding:2px;border-radius:100px;background:#666;display:table-cell;cursor:pointer;max-width:88%;background:#bbb;float:right;margin:0 0 10px 0}
p.s:hover, p.s:hover:after{background:#888}
p.s:after{content:'';display:block;position:absolute;width:6px;height:12px;background:#bbb;bottom:-6px;right:-2px;border-radius:0 0 5px 5px;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
.searchForm{display:table !important;width:100%;height:55px;padding:0 0 5px;}
.content .searchForm{display:block;margin-left:0;width:inherit;}
.content .queryField{padding:0 55px 0 0px}
input[type="text"].queryField{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 30px 0 55px;width:100%!important;height:55px;border:none;border-radius:0;background:rgba(0, 0, 0, .03) url(http://blog.ucoz.ru//img/new/search.png) no-repeat 25px 50%;color:#96999e;font-style:italic}
.searchSbmFl{display:none}
.search-inf{padding:20px 0}
.search-results .eMessage{padding-left:0 !important}
.search-results .eTitle{font-size:22px}
.search-results .eDetails{color:#94999E}
.login-but a.user-fo{height:28px;font:14px/2px arial;margin:16px 0 0 !important;color:#fff!important;text-align:center;float:right;width:12%;display:inline-block;padding:5px 0 0px;box-sizing:border-box;}
.login-but a.user-fo:hover{background:#F26352;color:#fff!important}
.login-but:hover a.user-fo{background:#F26352;color:#fff!important}
.login-in{display:none;padding:15px!important;box-sizing:border-box;}
.login-but:hover .login-in{display:block;padding:10px 0 20px;font-size:14px;position:absolute;width:100%;top:44px;background:#444;text-align:center!important;color:#fff;z-index:333}
.form-poisk{margin: 0 4% 0 0;width:22.8%;}
.search-string{background-color:#000;position:relative;width:100%;text-align:right;box-sizing:border-box;}
input.search-string-input{color:#9f9f9f;font:bold 14px solid "PT Sans", verdana;background:#333;height:28px;display:inline-block;vertical-align:middle;margin:16px 0 0;padding:0 0 0 12px;border:none;outline:none;width:76%;box-sizing:border-box;border-radius:0;}
input.search-string-input::-webkit-input-placeholder{font-size:0.8125rem;color:#aaa;}
input.search-string-input::-moz-placeholder{font-size:0.8125rem;color:#9f9f9f;}
.search-string-input:hover{background:#444}
.search-string-input:focus{color:#fff;background:#444;}
input.search-string-button{width:12%;height:28px;background:url('/img/bg/iconsheet-search.png') top -7px center no-repeat #333;padding:0 !important;border:none;display:inline-block;float:right;margin:16px 0 0 !important;-webkit-border-radius:0;border-radius:0}
.search-string-input:focus + input.search-string-button{background-color:#dd4b39;background-position:50% -47px;display:inline-block;margin:16px 0 0}
input.search-string-button:focus,input.search-string-button:hover{background:url('/img/bg/iconsheet-search.png') top center no-repeat #0c1318;background-color:#f26352 !important;background-position:50% -47px;border-bottom:none;box-shadow:none;margin:16px 0 0}
<div class="right hidden-phone form-poisk">
<form action="/search" method="get" class="search-string left hidden-phone">
<div class="login-but"><a href="$PERSONAL_PAGE_LINK$" class="user-fo" ><span class="glyphicon glyphicon-user"></span></a><div class="login-in"><?if($USER_LOGGED_IN$)?><img src="<?if($USER_LOGGED_IN$)?>$USER_AVATAR_URL$<?else?>http://work-by.net/img/other/ura.png<?endif?>" width="60" height="60" style="float:left;margin:0 15px 0 0" />Привет <a href="$PERSONAL_PAGE_LINK$" style="color:#FFa" title="Просмотреть профиль"><b>$USERNAME$</b></a>!<br><a href="$LOGOUT_LINK$" style="color:#FFF;font-size:14px">выйти</a><?else?>Войти с помощью аккаунта $LOG_FORM$ <br><?endif?></div></div>
<input class="search-string-input" type="text" placeholder="Поиск по сайту" name="q" value="">
<input class="search-string-button" type="submit" value="">
</form>
</div>
Пример работы поиска, можно увидеть на сайте
work-by.net . Сейчас на бекграунде используется изображение-спрайт, а нужна иконка.
