「Font Awesome」の使い方 2/4
※こちらの記事は「Font Awesome」のバージョン4.0.3をもとに書かれています。バージョンアップにより内容が変更されている場合もありますので、その際は公式サイトを確認してください。
目次
④アイコンフォントのサイズ設定
「font-awesome.min.css」には、サイズを設定できるクラスが用意されています。サイズ設定のクラスは「fa-lg(約1.33倍)」「fa-2x(2倍)」「fa-3x(3倍)」「fa-4x(4倍)」「fa-5x(5倍)」の5つになります。
5つのクラスのいずれかを追加することで簡単にサイズを変更することができます。
- 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サイズ設定のスタイル
.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}それぞれのクラスには、font-sizeプロパティでサイズが設定されています。サイズの単位は「em」が利用されていますので、親要素のフォントサイズを基準に倍数設定されます。
ですので、以下のように親要素のフォントサイズが異なる場合は同じクラスを設定してもサイズが異なってくるので注意が必要です。
<div style="font-size:100%;"><i class="fa fa-camera-retro fa-2x"></i> fa-2x</div>
<div style="font-size:200%;"><i class="fa fa-camera-retro fa-2x"></i> fa-2x</div>⑤アイコンフォントの色設定
残念ながら「font-awesome.min.css」には、色を設定できるクラスは用意されていません。こちらは、独自でクラスを設定する必要があります。アイコンフォントはもちろん文字ですので、フォントの色も簡単に変更することができます。
- FB
- TW
- Go
- Rs
設定内容
<ul>
<li class="fa fa-3x fa-facebook-official colorFB">FB</li>
<li class="fa fa-3x fa-google-plus-square colorTW">TW</li>
<li class="fa fa-3x fa-twitter-square colorGo">Go</li>
<li class="fa fa-3x fa-rss-square colorRs">Rs</li>
</ul>色設定のスタイル
.colorFB {color: #305097;}
.colorTW {color: #00aced;}
.colorGo {color: #db4a39;}
.colorRs {color: #f26522;}こちらは単純にcolorプロパティで色設定しただけの独自のクラスになります。li要素に設定しているためテキストも含めて色が設定されてます。アイコンだけに設定したい場合は、以下のように設定します。
- FB
- TW
- Go
- Rs
設定内容
<ul class="marTB20">
<li><i class="fa fa-3x fa-facebook-official colorFB"></i>FB</li>
<li><i class="fa fa-3x fa-google-plus-square colorTW"></i>TW</li>
<li><i class="fa fa-3x fa-twitter-square colorGo"></i>Go</li>
<li><i class="fa fa-3x fa-rss-square colorRs"></i>Rs</li>
</ul>アイコンフォントを表示させる要素を独立させたことで、アイコンだけに色が変更されました。
ただし、先ほどの設定ではアイコンが横並びだったのが、要素を独立させただけで縦並びになりました。こちらの原因については、次で解説していきます。
⑥アイコンフォントのリスト設定
アイコンフォントをリストの装飾として利用される方も多いかと思いますが「font-awesome.min.css」を利用すると、ul・li要素を設定してもリスト化されません。先ほどの横並びと縦並びの事象がまさにそれです。
アイコンフォントをリストで利用する場合は、ul要素にクラス「fa-ul」、li要素にクラス「fa-li」を設定する必要がありますので、こちらについて解説していきます。
- Home
- Library
- Applications
- Settings
設定内容
<ul class="fa-ul">
<li><i class="fa fa-li fa-home"></i> Home</li>
<li><i class="fa fa-li fa-book"></i> Library</li>
<li><i class="fa fa-li fa-pencil"></i> Applications</li>
<li><i class="fa fa-li fa-cog"></i> Settings</li>
</ul>このようにクラス「fa-ul」「fa-li」を利用することでリスト化できます。
リスト化されなかった原因は、クラス「fa」のdisplayプロパティに「inline-block」が設定されていたからです。「inline-block」を解除すれば通常のリストとして表示されますが、こちらでは以下のようにpositionプロパティを利用してリスト化しています。
リスト設定のスタイル
.fa-ul {
padding-left: 0;
margin-left: 2.142857142857143em;
list-style-type: none;
}
.fa-ul > li {
position: relative;
}
.fa-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
top: 0.14285714285714285em;
text-align: center;
}⑦アイコンフォントを同じ幅に設定
続いて、アイコンフォントの幅の設定について解説していきます。アイコンフォントは全て同じ幅のフォントではありません。中にはサイズが異なるアイコンフォントも存在します。
先ほど解説したクラス「fa-ul」「fa-li」はアイコンの幅を考慮して設定されていたため全て同じ幅で表示されていますが、特に設定せずに利用すると以下のように表示されます。
Home
Library
Applications
Settings
Amex
設定内容
<i class="fa fa-home"></i> Home<br />
<i class="fa fa-book"></i> Library<br />
<i class="fa fa-pencil"></i> Applications<br />
<i class="fa fa-cog"></i> Settings<br />
<i class="fa fa-cc-amex"></i> AmexAmex のアイコンだけ位置がずれているのが確認できます。そこで、このずれを修正するためにアイコンの表示幅を一定に固定できるクラス「fa-fw」が用意されています。それでは、クラス「fa-fw」を設定するとどのように表示されるのかを確認してみましょう。
Home
Library
Applications
Settings
Amex
設定内容
<i class="fa fa-fw fa-home"></i> Home<br />
<i class="fa fa-fw fa-book"></i> Library<br />
<i class="fa fa-fw fa-pencil"></i> Applications<br />
<i class="fa fa-fw fa-cog"></i> Settings<br />
<i class="fa fa-fw fa-cc-amex"></i> Amexアイコンが同じ幅で表示されたのが確認できます。続いて、どのようにスタイルが設定されているのかを確認していきます。
「fa-fw」のスタイル
.fa-fw {
width: 1.28571429em;
text-align: center;
}クラス「fa-fw」には、幅のサイズとテキストの中央寄せが設定されています。幅のサイズ「1.28571429em」がおそらく最大幅のアイコンをカバーするだけのサイズかと思います。こちらの設定によって、アイコンを同じ幅で表示させることができます。
次はCSS3を利用した特長的な設定について解説していきます。
参考書籍
HTML5×CSS3でスマホとタブレットにほぼ完全に対応したレスポンシブデザインを本格的に学ぶことができる。Webページを制作していく上で、Font-Awesomeによるアイコンフォントの使い方など様々なテクニックがまとめられている。スマートフォンなど多様なデバイスに対応しており、使い勝手や見栄えを向上させるTipsをたくさん学べる。
