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

Question

참고로

이 해결 CODE :

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 도와주세요

Answer 1

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

.

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

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

Answer 2

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

또한 내가이 fiddle

Answer 3

이 button 태그 안에 넣어 만들

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