2017-12-31 272 views
1
참고로

이 해결 CODE :HTML 형태로 제출 버튼을 같이 FontAwesome 아이콘을 사용하는 방법

BACK ORIGINAL 질문에
<div id="header-search-desktop-div"> 
<form id="header-search-form" role="search" action="https://themirrorman.co/" method="get"> 
    <fieldset> 
     <span class="text"> 
      <input id="header-search-desktop-span" style="border-radius: 24px;" type="text" value="" name="s" class="s" placeholder="I am looking for..." /> 
      <input id="header-search-submit" type="submit" value="&#xf002;" name="post_type" /> 
     </span> 
    </fieldset> 
</form> 
</div> 

#header-search-submit { 
    position: absolute; 
    z-index: 1; 
    padding: 0; 
    right: 15px; 
    top: 6px; 
    font-size: 24px; 
    font-family: FontAwesome; 
    color: #7B7B7B; 
    cursor: pointer; 
    background: 0; 
    border: 0; 
} 

: 나는 역할이 FontAwesome 검색 아이콘을 얻으려고

제출 버튼 :

:

Search form submit IMG

링크 형태 (하지 상록를) 검색하려면

https://themirrorman.co

JS 사용 및 버튼 태그 사용과 같은 여러 가지 다른 질문을 검토했지만 여전히 작동하지 않습니다. 여기

내 코드입니다 :

CSS :

#header-search-submit { 
position: absolute; 
z-index: 1; 
right: 36px; 
top: 6px; 
font-size: 24px; 
color: #7B7B7B; 
cursor: pointer; 
width: 0; 
} 

input[type="text"] { 
border: 1px solid #881d98; 
border-radius: 24px; 
border-color: white; 
} 

/* header search desktop */ 
@media screen and (min-width: 800px) { 
#header-search-desktop-div { 
    position: absolute; 
    left: 150px; 
    width: 450px; 
    margin-top: 0; 
    margin-bottom: 0; 
} 
} 

HTML :

<div id="header-search-desktop-div"> 
<form id="header-search-form" class="search" action="https://themirrorman.co/" method="get"> 
    <fieldset> 
     <span class="text"> 
      <input name="product-search" id="header-search-desktop-span" type="text" value="" placeholder="Product Search…" /><i id="header-search-submit" class="fa fa-search"></i> 
     </span> 
    </fieldset> 
    <input type="hidden" name="post_type" value="product" /> 
</form> 
</div> 

가 '/ 머리 전에 공간'으로 기능을 제출 만들 JS를 사용하는 아이디어? : 나는 분명히 매우 뭔가를 잘못하고 있어요

<script>$('#header-search-desktop-span').click(function() { 
alert('Searching for '+$('#header-search-submit').val()); 
}); 
</script> 

= D 도와주세요

답변

1
당신은 제출 버튼을 font-family로 FontAwesome을 확인하고 값으로 &#xf002;를 사용해야합니다

.

<input style="font-family: FontAwesome" value="&#xf002;" type="submit"> 

추가 CSS를 사용하여 단추의 스타일을 변경할 수 있습니다.

+0

감사합니다! 이제 버튼이 제대로 작동합니다. 그러나 이제 별도의 단추 요소가 표시됩니다. 어떻게 추가 단추를 제거하거나 숨길 수 있습니까? 문제는 여기에 표시 : 여기 HTML 코드 https://themirrorman.co : 그것에 대해 죄송합니다, 새로운 코드에 대한 답을 변경 https://jsfiddle.net/zayter/gt3asodb/ – VisualWizardry

+0

@VisualWizardry 어떤 일을해야한다 . – skiilaa

+0

당신은 절대적인 아름다움을 당신의 도움에 너무 감사합니다! – VisualWizardry

0

이렇게하려면 fontawesome을 사용하는 것이 좋습니다. 글꼴을 다운로드하여 html 프로젝트에 배치 할 수 있습니다. 그리고 부트 스트랩을 사용하여 input group 버튼을 만들 수도 있습니다.

또한 내가이 fiddle

+0

정보를 제공해 주셔서 감사합니다. 나는 skiilaa의 코드를 사용했고 작동했습니다! – VisualWizardry

1

button 태그 안에 넣어 만들

<button class="btn"> 
    <i class="fa fa-search" aria-hidden="true"></i> 
</button> 
+1

정보를 제공해 주셔서 감사합니다. 나는 skiilaa의 코드를 사용했고 작동했습니다! – VisualWizardry