【解決済み】FontAwesome5のサーチアイコンをWordPressの検索ボタンで使う

cssテクニック ホームページ制作

FontAwesomeが新しくなったので、使い方も少し変わってきました。
という話を前回しました。

【解決済み】FontAwesome5を疑似クラス(before)で表示させたいけど、うまく表示されない

WordPressの検索機能を使う時に、デフォルトなら検索とかSearchという文字が入ってますが、デザインがサーチアイコンの時があります。
FontAwesome4の時は、文字コードを入れてフォントファミリーを指定すればそれでよかったんですが、FontAwesome5になってからその方法が出来なくなりました。
SVGに変わってしまうからです。

というわけで、調べてたんですが日本語だと出てこなかったので紹介します。
▼コードはこちら▼
<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>" >
<input type="text" value="" name="s" class="s" placeholder="キーワードで検索" onfocus="this.placeholder=''" onblur="this.placeholder='キーワードで検索'" />
<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>

inputの部分をbuttonに変更してアイコンのコードを入れます。
以上!

気に入った記事であれば、ぽちっとお願いします<(_ _)>