初めに
前回の記事ではAnimate.cssとwow.jsを使ってサイトにアニメーションを加えました。
Animate.cssとwow.jsを使ってサイトにアニメーションをつける
今回はFont-Awesomeを使ってサイトにアイコンを表示させたいと思います。
自身のサイトでは、GitHubやTwitterのアイコンにFont-Awesomeを利用しています。
さらにAnimate.css、wow.jsを使ってアニメーションをアイコンに適用しています。
tiwuofficial.github.io
1.準備
Font-Awesome
Font-Awesomeは500種類を超えるアイコンをwebフォントとして表示できるフォントセットです。
画像ではなく、フォントのためCSSを利用しサイズ、配色を容易に変更できます。
Font-AwesomeはCDNサーバ上にあるため、フォントファイルをダウンロードする必要はありません。
もし、ダウンロードして自身のサーバ上に設置したい場合は公式サイトからダウンロードしてください。
2.使い方
ファイルの読み込み
CDNサーバー上のFont-Awesomeを利用する場合下記の方法で読み込みます。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
フォントファイルをダウンロードして利用する場合、ダウンロードしたzipファイルの中の
fontフォルダとcssフォルダをサーバーに設置し下記の方法で読み込みます。
<link rel="stylesheet" href="css/font-awesome.min.css">
hrefのパスは配置した位置に合わせて変えてください。
特に理由がないのであれば、CDNサーバーからファイルを読み込む方法が良いと思います。
利用方法
アイコンの表示の方法はとても簡単で、公式サイトのアイコン一覧から好きなアイコンをクリックします。
アイコン一覧
アイコンのページに行くと
<i class="fa fa-amazon"></i>
のようにソースがあるのでコピーして貼り付けるだけでアイコンが表示できます（例はAmazonのアイコン）
オプション
サイズの変更
classにfa-lg fa-2x fa-3x fa-4x fa-5xを指定することでサイズを変更できます。
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
アイコンの表示幅の統一
アイコンによって幅、余白がばらばらなため、テキストの開始位置がアイコンによってずれます。
そこで、アイコンの表示幅を統一させるためにclassにfa-fwを指定します。
<i class="fa fa-home fa-fw"></i>Home
<i class="fa fa-book fa-fw"></i>Library
<i class="fa fa-pencil fa-fw"></i>Applications
<i class="fa fa-cog fa-fw"></i>Settings
リストによる利用
アイコンをリストで利用する場合はulのclassにfa-ulを指定し、liのclassにfa-liを指定します。
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
ボーダーで囲む
アイコンをボーダで囲むにはclassにfa-borderを指定します。
<i class="fa fa-quote-left fa-border"></i> border
回り込み
classにpull-leftとpull-rightを指定することで回りこみを実現できます。
<i class="fa fa-quote-left fa-pull-left"></i> sample text
回転
classにfa-spinを指定することでアイコンが回転します。また、fa-pulseを指定することで1周を8分割して回転します。
<i class="fa fa-spinner fa-spin"></i> fa-spin
<i class="fa fa-spinner fa-pulse"></i> fa-pulse
角度
classにfa-rotate-xを指定することでアイコンの角度を変えられます(90度,180度,270度)
また、fa-flip-xを指定することで反転させることが可能です。
<i class="fa fa-shield"></i> normal
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
アイコンの組み合わせ
さらに、複数のアイコンを重ねて表示することも可能です。
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
親classにfa-stackを指定し、fa-stack-1xを指定したアイコンが前面に、fa-stack-2xを指定したアイコンが背面にきます。
Animate.cssとwow.jsとの組み合わせ
Animate.cssとwow.jsを組み合わせることでアイコンにアニメーションをつけることができます。
<i class="fa fa-github-square wow bounceIn" data-wow-delay="0.3s" data-wow-duration="1s"></i>
上記例ではスクロールがアイコンの位置に達したら、0.3秒後に1秒かけてアイコンがバウンスインアニメーションで表示されます。
3.最後に
このように複数のcssやJavaScriptを組み合わせることで一味違うサイトが構築できると思います。