検索フォームの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が苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

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

プロフィールはこちら