input要素の中にアイコンを追加したい

Question

前提・実現したいこと

input要素の中にアイコンを追加して右寄せにしたい。

発生している問題・エラーメッセージ

input要素の中にアイコンが追加できない

該当のソースコード

 <form action="">
   <input type="text" role="search" method="get" placeholder="&#xf002; 検索する">
 </form>

 form{
                text-align: center;
                input{
                    background-color: $search;
                    border-radius: 5px;
                    border: 1px solid #EBEBEB;
                    padding: 5px;
                    margin:10px 0 ;
                    display: inline-block;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: normal;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
                
            }    

試したこと

placeholderでアイコンを追加しようとしたが解決しなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

https://getbootstrap.com/docs/4.4/components/forms/#inline-forms

多分こんなことしたいのかな（Username 参照）

[ral819]

似ていますが、下記のリンクの検索バーのようにしたいです。
https://www.stork19.com/

Answer 1

まず、検索フォームの基本的な作り方ですが、
「テキストを入力する場所のタグ」と「決定ボタンのタグ」の2つを作る必要があります。
ご提示いただいたサイトの検索フォームも、
一見同じ場所へ置いているように見えますが、ソースを見てみるとformタグ内に<input type="search">と<button type="submit">の2つのタグがそれぞれ記述されているのが分かりますね。

こんなんでどうですかね？

<form action="" class="search">
    <input value="" type="text" class="searchbox">
    <input class="sumbit fa fa-2x" value="&#xf002;" type="submit">
</form>

検索キーワードを入れるとこにはtype="searchやtype="text"、決定ボタンにはtype="submit"の属性を付与します。
（わかりやすいサイト：【初心者向け】0からformがわかる｜HTMLでのフォーム作成）

FontAwesomeをお使いのようなので、inputに.faをクラス指定してやるだけでfont-familyだのfont-weightだのを付与することができ、コードがちょっとだけスッキリするかと思います。
検索フォームの幅とか文字サイズとかは構築中のレイアウトに併せて適宜調節してください。

form.search {
    position: relative;
    width: 500px;

    input {
        line-height: 20px;

        &.searchbox {
            width: 100%;
            padding: 10px 0;

        }

        &.sumbit {
            border: none;
            background-color: transparent;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}

Comments

[ral819]

回答ありがとうございます。
上記のコードに加えてdisplay:flex;を追加したらいい感じになりました！
ありがとうございます。

[sora1234567]

今もできますか？コピーさせてもらってcode.penでやったんですが、アイコンが四角にしかならないんですよね

[Yorrie]

回答にも書いてますが前提条件としてFontAwesomeの導入が必要なので、
head内にタグ書いてFontAwesomeのアイコンを読み込ませてください…。
https://codepen.io/tatamisteak/pen/vYNoxYy

Answer 2

このような形でいかがでしょうか?

form {
  text-align: center;
  input {
    background-color: $search;
    
    /* 好きな画像を設定してください */
    /* background-image: url(https://icon-rainbow.com/i/icon_00147/icon_001470_256.jpg); */
    background-image: url(icon-search.svg);
    
    background-size: 12px 12px; /* 好きなサイズを設定してください */
    background-position: right 5px center; /* 「right 5px」は右側からの位置です。好きな値を設定してください。 */
    background-repeat: no-repeat;
  }
}