Web blog WEBブログ

submitボタンにアイコンフォント(Font Awesome)を使う方法

2019.08.09

こんにちは。コーダーの兼山です。

画像を指定したり、テキストで [ 送信する ] といった形で表示をする他に、とても便利なFont Awesomeのアイコンを、フォームの送信ボタン(submitボタン)に使用する方法を紹介します。

フォームの送信ボタンにFont Awesomeのアイコンを使用する方法

フォームを送信する際にクリックする「サブミットボタン」にアイコンフォント「Font Awesome(Free版)」を使ってアイコンを表示させてみたいと思います。

今回表示させたいアイコンは「 (虫眼鏡)」です。

「input」要素の「value」の値にアイコンのコード(Unicode)をセットします。
アイコンのコードはFont Awesomeのページから取得できます。

「value」の値にセットするときはコードの先頭に「&#x」を、後尾に「;」を追加してください。
今回のデモで使用している、虫眼鏡のアイコンの場合「」になります。

まとめ

Font Awesomeを使う方法は、レスポンシブコーディングへの対応や、メンテナンス時に手間がかかりませんし、初期コーディング時に、スライスの手間も省けます。

作業効率を上げる方法の1つとして、Font Awesomeを活用しましょう!

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口