スマホやタブレットなどのアイコンフォント【Font Awesome】

スマホやタブレットなどのデバイスアイコン、snsなどのソーシャルアイコン、webアプリケーション、ビデオプレーヤー、医療関連アイコンなどを使いたい場合は、「Font Awesome」を利用すると色々なアイコンをwebフォントとして使用することができます。

「Font Awesome」は250種類以上の高品質なアイコンフォントが無料で利用できる、信頼性の高いwebサービスです。 使い方もとっても簡単で、各アイコンはwebフォントとして利用できるため、CSSだけで色々な表現をする事も可能です!

それでは「Font Awesome」を使った、スマホやタブレットなどのアイコンフォントの作り方を紹介していきますね(^^♪

フォントをダウンロードする

fontawesomeダウンロード

まずは「Font Awesome」にアクセスします。 アクセス後、トップページの「Download」をクリック。

downloadをクリック

ポップアップが表示されたら下の「No thanks,just download Font Awesome」をクリック。 クリック後ダウンロードが開始されます。

ZIP形式の圧縮されたファイルがダウンロードされるので、ファイルを解凍します。

※よくわからない場合はダウンロードしたzipファイルを右クリックし「すべて展開」を選択するか、またはダウンロードしたzipファイルをダブルクリックし中に1つだけフォルダが入っているので、それを切り取りデスクトップなどに貼り付けて下さい。

ダウンロードファイルの中身

ダウンロードしたフォントデータの中には、4つのフォルダとテキストドキュメントが入っています。 この中のcssフォルダとfontsフォルダをサーバーへアップします。(よくわからなければフォルダごとアップしても大丈夫です)

※cssフォルダ内では「font-awesome.min.css」のみアップすればいいのですが、面倒、もしくはよくわからない場合はフォルダごとアップしても問題ありません。

アップロードする

ffftpなどを使用して、cssフォルダとfontsフォルダを同じ階層にアップロードします。 面倒な場合は、解凍したフォルダごとアップしても大丈夫です。

仮にcssフォルダとfontsフォルダを別のディレクトリにアップしたい場合は、cssファイル内の相対参照させている「../fonts」の部分を書き換えて下さい。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

このページではワードプレスで使用する場合と、通常のホームページで使用する場合の2パターンを紹介していきますね。 また、解凍したフォルダ(font-awesome-4.7.0)ごとアップロードする方法で解説していきます。

ワードプレスで使用する場合

まずは解凍したフォルダ(font-awesome-4.7.0)をテーマフォルダ直下に置きます。 そしてheader.phpテンプレート内の<head>~</head>内に下記を記述し、cssファイルを呼び出します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/font-awesome-4.7.0/css/font-awesome.min.css">

「font-awesome-4.7.0」の部分はfont-awesomeのバージョンによって変わることがあるので、ダウンロードしたファイルに合わせて書き換えて下さい。

子テーマで使用する場合

WordPressの子テーマで使う場合は、下記のように記述します。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/font-awesome-4.7.0/css/font-awesome.min.css">

ホームページで使用する場合

解凍したフォルダ(font-awesome-4.7.0)を任意のディレクトリに配置します。 (よくわからない場合は、HTMLファイルと同じ場所にアップして下さい)

HTMLファイルの<head>~</head>内に下記を記述し、cssファイルを呼び出します。

※下記はHTMLファイルと同じ場所にフォルダを配置した場合。

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

「font-awesome-4.7.0」の部分はfont-awesomeのバージョンによって変わることがあるので、ダウンロードしたファイルに合わせて書き換えて下さい。

CDNサーバ上のFont Awesomeファイルを利用する場合

上記ではFont Awesomeからフォントデータをダウンロードして自分のサーバー上にアップする方法でしたが、それをせず、CDNサーバ上のFont Awesomeファイルを読み込むこともできます。 つまりこのやり方だと、ダウンロード・アップロードが不要で、下記のコードを<head>~</head>内に記述するだけでFont Awesomeが利用できるようになります。

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

Font Awesomeの使い方

Font Awesomeの「icons」をクリック

Font Awesomeの「icons」をクリックし、使用したいアイコンフォントを探します。

Font Awesome「icons」 アイコンフォント一覧

デスクトップpcのアイコンは「desktop」、スマートフォンのアイコンは「mobile」、タブレットのアイコンは「tablet」、その他は「laptop」と検索すると各デバイスアイコンが見つかります。 使用したアイコンが見つかったら、アイコンフォントをクリック。

アイコンフォント使用方法のページ

クリックするとアイコンフォントのサンプルと使用方法が掲載されているページへ移動します。 そこに掲載されているクラス名(class属性の値)を、アイコンフォントを表示したい要素(h1やpなど)に指定してあげるとアイコンフォントが表示されるようになります。

例えば上記の場合であれば、クラス名は「fa fa-desktop」の部分となります。 なのでp要素の前にアイコンを表示したい場合であれば下記のように記述します。

<p class="fa fa-desktop">この前にアイコンフォントが表示</p>

<!-- 文字がなくても表示できます -->
<div class="fa fa-desktop"></div>

この前にアイコンフォントが表示

こういうようにアイコンフォントは、Font Awesomeのアイコン一覧(iconsのページ)に記載されているclass名を指定する事で表示できます。 それともう一つアイコンフォントを表示するやり方があります。

Unicodeでアイコンフォントを表示

要素にクラス名を指定せず、Unicodeのみでアイコンフォントを表示させる方法があります。 例えば下記のように指定しても表示できます。

<div>ここにアイコンを表示</div>

<!-- テキストはなくても大丈夫です -->
div:after{
  font-family: 'FontAwesome';
 content: "\f108";
}
ここにアイコンを表示

これはdivに対して:after疑似要素(:beforeでも可能)のcontentプロパティにアイコンフォントのUnicodeを指定し、「font-family: FontAwesome」を設定する事で アイコンフォントを表示しています。

なのでアイコンフォントを表示したい要素に対して:before、または:after疑似要素を指定し、「font-family: FontAwesome」、そしてcontentプロパティで使用したいアイコンフォントのUnicodeを指定するだけでアイコンフォントを表示することができるようになります。

Unicodeの確認方法

Font Awesomeの「icons」の場所

Unicodeの確認方法の確認方法ですが、まずはFont Awesomeの「icons」をクリック。

「icons」のアイコンフォント一覧

次に使用したアイコンフォントをクリック。

Unicodeの場所

そうすると使用方法のページにでます。 Unicodeはそのページ内の表示サンプルの下あたりに記載されています。

上記の場合「Unicode:f108」の「f108」部分がUnicodeとなります。

それで実際に記述する時は、まずfont-familyプロパティで「FontAwesome」と指定します。 そしてcontentプロパティでUnicodeを設定しますが、この時「\f108」というようにバックスラッシュ(実際に入力すると¥マークになります)を先頭に付けるようにします。

これを踏まえて記述すると下記のようになるので、是非お試し下さい。

div:after{
  font-family: 'FontAwesome';
 content: "\f108";
}

アイコンフォントのスタイル

スマホやパソコンなどのデバイスアイコンは、ナビゲーションなどで使用することが多いと思うので、それに合わせたスタイルを指定してみます。

<ul class="example">
  <li class="sample1">メニュー1</li>
  <li class="sample2">メニュー2</li>
  <li class="sample3">メニュー3</li>
  <li class="sample4">メニュー4</li>
  <li class="sample5">メニュー5</li>
</ul>
.example li{
  list-style:none;
  float:left;
  padding-right:10px;
}
.example li:before{
  content:"";
  font-family:fontawesome;
  padding-right:7px;
}
li.sample1:before {content:"\f108";}
li.sample2:before {content:"\f10b";}
li.sample3:before {content:"\f10a";}
li.sample4:before {content:"\f109";}
li.sample5:before {content:"\f095";}

.example li:last-child {padding-right:0;}

.example {padding:0;}
.example:after{
  content:"";
  display:block;
  clear:both;
}
アイコンを横並びにした例

とりあえず各リストの前にスマホやタブレットなどのアイコンを表示し、横並びにしてみました。 で、floatで横に回り込ませているので、最後にulに対して:afterで回り込みを解除しています。

.example li{
  list-style:none;
  float:left;
  padding-right:10px;
  font-family:'游ゴシック', sans-serif;
}
.example li:before{
  content:"";
  font-family:fontawesome;
  padding-right:7px;
  color:#ccc;
}
li.sample1:before {content:"\f108";}
li.sample2:before {content:"\f10b";}
li.sample3:before {content:"\f10a";}
li.sample4:before {content:"\f109";}
li.sample5:before {content:"\f095";}
 
.example li:last-child {padding-right:0;}
 
.example {padding:0;}
.example:after{
  content:"";
  display:block;
  clear:both;
}
アイコンフォントのスタイルを設定した例

で、色を薄めにして、フォントファミリーを変えてみるとこんな感じになります。

アイコンを重ねて表示

アイコンフォントは重ねて表示することもできます。 下記は疑似要素を使用してパソコンのアイコンに禁止マークを重ねてみた例です。

<p class="sample1"><span>アイコンの組み合わせ</span></p>
p.sample1 {
  position: relative;
  font-family:'游ゴシック', sans-serif;
  color:#777;
}
p.sample1:before,
p.sample1:after{
  content:"";
  font-family:fontawesome;
  position:absolute;
}
p.sample1:before{
  content:"\f108";
  top:4px;
  left:-30px;
}
p.sample1:after{
  content:"\f05e";
  top:-4px;
  left:-35px;
  color: red;
  font-size:33px;
}
p.sample1 span:before{
  content:"=";
}
パソコンアイコンと禁止マークを重ねた例

ちなみに「font-awesome.min.css」には、複数のアイコンを重ねて表示するクラスも用意されているため、上記のようなcssを記述しなくてもhtmlだけでアイコンを重ねる事ができます。 用意されているクラスは 「fa-stack」(親要素設定)、「fa-stack-1x」(重ね標準サイズ)、「fa-stack-2x」(重ね2倍サイズ)、「fa-inverse」(色反転) となります。

使い方はアイコンの親要素に対して「fa-stack」を指定し、重ねるアイコンに対して「fa-stack-1x」「fa-stack-2x」をそれぞれ指定します。 重なり順はhtmlを最初に記述した順番で重ねられます。

<p class="fa-stack">
 <i class="fa fa-stack-1x fa fa-desktop"></i>
 <i class="fa fa-stack-2x fa-ban"></i>
</p>
htmlだけでアイコンを重ねた例

他にも用意されているクラスだけで、アイコンを回転させてたり、枠線を付けたり、大きさを変えたり色々できるんですが、また次回紹介したいと思いますね。

まとめ

Font Awesomeは、パソコンやスマホ、タブレットなどのデバイスアイコン以外にもsnsや各種webサービス関連のアイコンフォントが豊富に揃ってます。 しかも、用意されているクラスだけで自由にスタイルを変える事もできるので初心者にも最適です! それに各アイコンは画像じゃなく、フォントなのでテキスト感覚で使えます(^^♪

使いだすととっても便利なので是非使って見て下さいね(^^♪