検索フォームのbuttonやplaceholderにFont Awesomeを使う方法

2018.01.08 2018.03.26HTML/CSS
検索フォームのbuttonやplaceholderにFont Awesomeを使う方法

非常に便利なアイコンフォント『Font Awesome』ですが、検索フォームのbuttonや入力欄のplaceholderにも使えてしまいます。

検索ボタンを虫メガネにしたりとかはよくあるデザインだと思うので、そんなときに画像を使わずに表現できます。

Font Awesomeを使う下準備

headにてFont Awesomeを読み込みます。

CDNを利用すればこちらでサーバーにFont Awesomeのファイルをアップロードせずにすぐ使えます。新しいアイコンが追加されたときのメインテナンスも不要なのでおすすめです。

buttonにFont Awesomeのアイコンを表示するソース

検索フォームのボタンにFont Awesomeを使うソースです。ボタンの場合は普通に<i>タグが使えます。CSSは適宜変更してください。

<div class="searchform">
<form method="get" action="http://xxxxxxxxxxxxx.com/">
<div>
  <input type="text" name="s" />
  <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</form>
</div>
.searchform {
  background: #f99162;
  height: 65px;
  position: relative;
}

.searchform input[type=text] {
  width: 100%;
  height: 65px;
  border: 0;
  padding: 0 10px;
  background: #f99162;
  box-sizing: border-box;
}

.searchform button[type=submit] {
  border: 0;
  background: #f99162;
  width: 65px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
  color: #fdc28e;
}

placeholderにFont Awesomeのアイコンを表示するソース

次に、検索フォーム入力欄のplaceholderでFont Awesomeを使うソースです。

<div class="searchform">
<form method="get" action="http://xxxxxxxxxxxxx.com/">
<div>
  <input type="text" name="s" placeholder="&#xf002;" />
  <button type="submit">検索</button>
</div>
</form>
</div>
.searchform input[type=text] {
  height: 24px;
  border: 1px solid #d3d3d3;
  line-height: 26px;
  padding: 0 4px;
  font-family: FontAwesome;
}

.searchform ::-webkit-input-placeholder,
.searchform :-ms-input-placeholder,
.searchform ::-moz-placeholder {
  color: #d4d4d4;
}

.searchform button[type=submit] {
  height: 26px;
  line-height: 26px;
  background: #666;
  border: 0;
  color: #fff;
  padding: 0 10px;
  cursor: pointer;
}

CSSにてinput[type=text]のフォントファミリーをFont Awesomeに指定し、placeholderに使いたいアイコンのユニコードを入力します。

Font Awesomeのユニコードは、こちらのFont Awesome Cheatsheetで調べることができます。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田 竹思

柴田 竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら