【CSS】Font Awesomeアイコンを使って検索フォームを作成する方法

今回は、「Font Awesomeアイコンを使って検索フォームを作成する方法」について紹介します。

WordPressのようなブログサイトでよく使われているので、是非参考にしてください。

【CSS】Font Awesomeアイコンを使って検索フォームを作成する方法

完成形はこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

 

それでは早速コーディングしていきましょう!

HTML

formタグの中にFont Awesomeアイコンを表示するためのinputタグと、キーワード検索をするためのinputタグの2つを用意します。

そして、今回はFont Awesomeアイコンを使うので、必ずFont AwesomeアカウントのCDNコードをheadタグで読み込んでおきましょう。

CSS

search-buttonクラスには必ず「font-family: “Font Awesome 5 Free”;」のコードを記述しておきましょう。

このコードがないとせっかくFont AwesomeのCDNをheadタグに記述していても表示されなくなるので注意してください。

まとめ

以上が、Font Awesomeアイコンを使って検索フォームを作成する方法」でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事