2017-12-31 63 views
1
ご参考のため

解決しようCODE:HTML形式で送信ボタンを通りFontAwesomeアイコンを使用する方法

元の質問への
<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

ありがとうbuttonタグの中にそれを入れて作ります!ボタンが正しく機能するようになりました。しかし、別のボタン要素が表示されるようになりました。どのように追加ボタンを削除/非表示にするのですか?ここに示した 問題: https://themirrorman.co HTMLコードをここ: https://jsfiddle.net/zayter/gt3asodb/ – VisualWizardry

+0

@VisualWizardryそのことについて申し訳ありませんが、動作するはずの新しいコードに答えを変更。 – skiilaa

+0

あなたは絶対的な美しさをあなたの助けを借りてありがとう! – VisualWizardry

0

これを行うにはfontawesomeを使用することをおすすめします。フォントをダウンロードしてhtmlプロジェクトに配置することができます。 また、ブートストラップを使用してボタンでinput groupを作成することもできます。

また、私はこのfiddle

+0

情報ありがとうございました!私はskiilaaのコードを使用して、それは働いた! – VisualWizardry

1

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

ありがとうございました!私はskiilaaのコードを使用して、それは働いた! – VisualWizardry

関連する問題