Rails5で検索ボックスのplaceholderにFontAwesome5のアイコンを表示したい!

やりたかったこと

• ruby 2.6.3
• rails 5.2.6
• webpacker 5.3.0
• Font Awesome 5 (yarnでインストール)

で，こんな風にして，検索フォームにFont Awesome 5 の虫眼鏡マーク(Unicodeはf002)を出したかった。

index.html.slim

= form_with url: search_path, method: :get, local: true do |f|
  = f.text_field :search, class: 'fa_icon', placeholder: "\uf002 検索ワードを入力"
  = f.submit "検索"                                        # ↑ここ！

でも，表示してみると文字化けして□が出てきてしまう…

解決方法

以下の記事(Rails6でしたが)を参考に解決しました！

app/javascript/stylesheets/application.scss

@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
// 以下を追加しました。(追加したいアイコンはsolidだったので，これだけにしています。)
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/solid";

// 中略

.fa_icon {
  font-family: "Font Awesome 5 Free";
  // weightは,使いたいフォントがSolidなら900,RegularやBrandsなら400,Lightなら300
  font-weight: 900;
}

ありがとうございました！