FontAwesomeでsubmitにアイコンを置きたい

Question

サンプルプログラム

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<style>
input {
  font-family: FontAwesome;
}
</style>

<input type="submit" value="&#xf002;検索">

実行結果

質問

こちらの記事を参考にコードを書きましたが適応されません。
FontAwesome 5.0.6でやり方も変わってしまったのでしょうか？

https://www.tsukimi.net/submit-button_font-awesome.html

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

• HTML5
• Chrome (64.0.3282.140) (Windows)
• FontAwesome 5.0.6

Answer 1

はい、Font Awesome 5では仕組みが大幅に変わっていまして、all.js経由で入れた場合、文字ではなくJavaScriptでSVGに展開されます。

<input>ではなく<button>であれば、文字以外も入れられるので問題なく動かせます。

<button type="submit">
  <i class="fas fa-search"></i> 検索
</button>

Comments

[tanak]

ご回答ありがとうございます。
動作確認取れました。
コピペしていたものが.cssから.jsに変わっていたのには気づきましたがSVGをどんどん使っていくという動きがあるのですね。