jQueryとFont Awesomeで作った「トップに戻る」ボタンの簡単な導入方法

Webページのナビゲーションとして、そこかしこで見掛けるようになった「トップページへ戻る」ボタン。

ページを下にスクロールさせるとぼわ〜ん出現して、クリック（タップ）するとぐい〜〜ん！と上に戻るというやつです。ボタンはCSSとFont Awesome、出現とクリック時のエフェクト動作はjQueryを使っているだけなので、様々なブログやWebサイトに簡単に導入することができます。

[Font] Webフォントとして使える「Google Material icons」

Googleが公開しているMaterial iconsは、Webフォントとしても利用できます。

アイコンパックをダウンロードして自前のサーバーにアップして読み込む方法と、Googleのサーバーから読み込む方法のどちらにも対応。導入方法はMaterial icons guideに詳しく掲載されています。

Font Awesomeだけでは足りないという方に。

フラットシャドウアイコンを簡単に作成できるジェネレーター「flattyshadow.com」が公開されています。