プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

html.cssに関するTips

2017.12.19更新

アイコンフォント Font Awesome の設定方法

Attention!

「Font Awesome」を使えば、数百種類のアイコンを手軽にホームページへ組み込むことができます。結構、いろんなサイトで使われているのでメインアイコンでは使いづらいですが、カテゴリー表示などちょっとしたパーツに使うと便利です。

1上のdemoリンクで「Font Awesome」公式ページへ遷移します。

							
							

 

 

Font Awesomeには上記のような様々なアイコンが用意されており、ちょっとコードを書くだけで誰でも無料で使えます。

2設定方法は2つ、まずはCDN(Max CDN)を使う方法です
/*headの中に以下を追加するだけ!*/

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Font Awesome をCDNから使う場合、headタグの中に上記コードを入れるだけで準備OKです。

CDNとは「専用サーバーにある画像やフォントデータ」を読み込んで表示させる仕組みです。

つまりファイルをダウンロードして自分のサーバーにアップロードしていなくても使うことができます。

簡単に準備ができるのがCDNのメリットですが、レンダリングが増えてページ読み込みスピードが落ちる場合があるので、

筆者は、この後の「2つ目の方法」をお勧めします。

32つ目の方法は、Font Awesome 関連ファイルを公式サイトからダウンロードして、サーバーにアップする方法です。

							
							

Font Awesome公式サイト

http://fontawesome.io/

 

 

Font Awesomeの公式サイトの「Download」ボタンを押して、ZIPファイル一式をダウンロードします。

 

 

使用するのはこの2つのフォルダだけです。フォルダの階層(相対パス)は変えないようにしましょう。

 

 

 

これだけのファイルをサーバーにアップします。

4あとは、headタグの中にアップしたCSSファイルを読み込みます
<head>
	<!-- FontAwesomeの読み込み -->
	<link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
</head>

これでFont Awesomeを使う準備が整いました。

5「Font Awesome」アイコンの呼び出し方
/*このようなコードで呼び出します*/

<i class="fa fa-android"></i>

 

iタグを使って、アイコンを指定して呼び出します。

アイコンの選択は、公式サイトの「icons」をクリックして、アイコンを選びます。

http://fontawesome.io/icons/

 

 

 

選んだアイコンコードのアタマに「fa-」を付けて、

<i class=”fa fa-address-book”></i>

とすれば挿入完了です。

 

6アイコンのサイズを調整する場合
<i class=”fa fa-address-book fa-2x”></i>     /*フォントサイズの2倍*/
<i class=”fa fa-address-book fa-3x”></i>     /*フォントサイズの3倍*/
<i class=”fa fa-address-book fa-4x”></i>     /*フォントサイズの4倍*/
<i class=”fa fa-address-book fa-lg”></i>     /*フォントサイズよりやや大きめにする*/

アイコンのサイズや色は、

<p><i class=”fa fa-address-book”></i>アドレスブック</p>

このようにpタグで囲ってpに対する cssのfont-sizeやcolorが反映されますが、

iタグのコードの末尾に「fa-○x」と指定すれば、さらに2倍、3倍・・のサイズに調整できます。

 

7「fa-○○○○」で他にもいろいろな設定ができます。試してみましょう。
<i class=”fa fa-address-book fa-spin”></i>    /*回転アニメーションをつける*/

<i class=”fa fa-address-book fa-pulse”></i>   /*8フレームで1回転させる*/

<i class=”fa fa-address-book fa-rotate-270”></i>  /*角度を指定する*/

<i class=”fa fa-address-book fa-flip-vertical”></i> /*反転させる*/
トップへ