全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
submitボタンにアイコンフォント（Font Awesome）を使う方法
2019.08.09
※この記事は2019年08月09日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
画像を指定したり、テキストで [ 送信する ] といった形で表示をする他に、とても便利なFont Awesomeのアイコンを、フォームの送信ボタン（submitボタン）に使用する方法を紹介します。
フォームの送信ボタンにFont Awesomeのアイコンを使用する方法
フォームを送信する際にクリックする「サブミットボタン」にアイコンフォント「Font Awesome（Free版）」を使ってアイコンを表示させてみたいと思います。
今回表示させたいアイコンは「 （虫眼鏡）」です。
「input」要素の「value」の値にアイコンのコード（Unicode）をセットします。
アイコンのコードはFont Awesomeのページから取得できます。
「value」の値にセットするときはコードの先頭に「&#x」を、後尾に「;」を追加してください。
今回のデモで使用している、虫眼鏡のアイコンの場合「」になります。
まとめ
Font Awesomeを使う方法は、レスポンシブコーディングへの対応や、メンテナンス時に手間がかかりませんし、初期コーディング時に、スライスの手間も省けます。
作業効率を上げる方法の1つとして、Font Awesomeを活用しましょう！
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
