Font AwesomeのSearchアイコンを検索ボックスの中に仕込む方法。

超簡単にできたので、シェア。

HTML

        <div class="d-flex form-control">
          <em class="fas fa-search fa-lg search-icon-color"></em>&nbsp;&nbsp;
          <input class="search-invalid" type="search" placeholder="Ex:ULALA series" v-model="keyword">
        </div>

Sass

  .search-invalid {
    background-color: #fff;
    border: 0px;
    font-size: 16px;
  }

てな感じです。
前提条件としては、Vue.js （ うちは Nuxt.js ）を使いつつ、Bootstrap5とfont awesome5が入っていてと言う感じです。

なので、bootstrap5のform-controlでdivに定義し、ページ単位もしくは、assets配下のcssを上書き追加するかして、このsearch-invalidというcssをつけて、inputに標準で付いてくるCSSを打ち消せば（実質上書き）、美しく表示されると言うわけです。

いろいろ調べましたが、そこそこ面倒くさく書いてあったので、単純に表示だけ追加したければこれでいけます。
この他検索窓には、絞り込みするためのコードがJSで定義してある感じです。