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

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に変更してアイコンのコードを入れます。
以上!

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。