「Font Awesome」の使い方 4/4
※こちらの記事は「Font Awesome」のバージョン4.0.3をもとに書かれています。バージョンアップにより内容が変更されている場合もありますので、その際は公式サイトを確認してください。
目次
⑫アイコンフォントの回り込み設定
「font-awesome.min.css」には、アイコンフォントの回り込みができるクラスが用意されています。回り込み設定のクラスは「pull-left(左側に回りこみ)」「pull-right(右側に回りこみ)」の2つになりますが、こちらはfloatプロパティが設定されているため利用する際に注意が必要です。
先に回り込みのスタイルを確認すると以下のようになっています。
回り込みのスタイル
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.fa.pull-left {
margin-right: .3em;
}
.fa.pull-right {
margin-left: .3em;
}こちらでは、フロートとマージンだけが設定されています。それではまず、回り込みを利用しない場合どのように表示されるか確認してみます。こちらではよく引用符で用いられるアイコンを利用しています。
こちらの文章はアイコンフォントの回り込み設定を確認するための文章になります。回り込み用のクラスが用意されていますが利用する際に注意が必要なので、こちらで検証を行っています。
<p><i class="fa fa-quote-left">テキスト</i><i class="fa fa-quote-right"></i></p>p要素の内部にアイコンを設定しているため、テキストの最初と最後にアイコンが表示されています。
こちらの文章はアイコンフォントの回り込み設定を確認するための文章になります。回り込み用のクラスが用意されていますが利用する際に注意が必要なので、こちらで検証を行っています。
<i class="fa fa-quote-left"><p>テキスト</p></i><i class="fa fa-quote-right"></i>こちらはp要素の外側にアイコンを設定しており、テキストを包含してアイコンが表示されているのが確認できます。続いて回り込みを利用した場合も確認してみます。
こちらの文章はアイコンフォントの回り込み設定を確認するための文章になります。回り込み用のクラスが用意されていますが利用する際に注意が必要なので、こちらで検証を行っています。
<p><i class="fa fa-quote-left pull-left">テキスト</i><i class="fa fa-quote-right pull-right"></i></p>こちらはよく見る引用符の使い方が再現できました。引用符としてアイコンフォントの回り込みを設定する場合は、このようなに設定しましょう。
こちらの文章はアイコンフォントの回り込み設定を確認するための文章になります。回り込み用のクラスが用意されていますが利用する際に注意が必要なので、こちらで検証を行っています。
<i class="fa fa-quote-left pull-left"><p>テキスト</p></i><i class="fa fa-quote-right pull-right"></i>こちらはp要素の外側にアイコンを設定しています。回り込みを設定するとレイアウトが崩れた状態になりました。 がHTMLソースに対して回り込みをしています。このようにフロート解除も設定されていないクラス「pull-left」「pull-right」を利用する場合は、レイアウトがどのようになるのかを考えた上で利用するようにしましょう。
⑬複数のアイコンを重ねて表示
「font-awesome.min.css」には、複数のアイコンを重ねて表示するクラス「fa-stack(親要素設定)」「fa-stack-1x(重ね標準サイズ)」「fa-stack-2x(重ね2倍サイズ)」「fa-inverse(色反転)」の4つのクラスが用意されています。まずは基本的な設定方法から解説していきます。
＝ fa-camera(fa-stack-1x)＋ fa-ban(fa-stack-2x)
設定内容
<span class="fa-stack">
<i class="fa fa-stack-1x fa-camera"></i>
<i class="fa fa-stack-2x fa-ban"></i>
</span>こちらは、カメラと禁止のアイコンを重ねて撮影禁止でよく見かけるアイコンを作成した事例です。まず重ねるアイコンの親要素に対してクラス「fa-stack」を設定します。
次に重ねる順番ですが、最初に記述したものから順に重ねていきます(最後に記述したアイコンが一番上に表示)。こちらでは、下にカメラアイコン、上に禁止アイコンの順に設定しています。
続いて重ねる処理ですが、こちらはクラス「fa-stack-1x」と「fa-stack-2x」が用意されています。こちらの違いはアイコンのサイズになります。「fa-stack-1x」は標準サイズ、「fa-stack-2x」は2倍サイズで設定されています。
今回は、禁止アイコンに「fa-stack-2x」を設定しています。尚、フォントの色設定は用意されていませんので、禁止アイコンの色は別の独自スタイルを適用させています。
アイコン組み合わせのスタイル
.fa-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
.fa-inverse {
color: #ffffff;
}スタイルを確認するとpositionプロパティで重ね位置を設定しています。サイズについては、「em」で設定されていますので、親要素のサイズに影響するため注意が必要です。
＝ fa-square-o(fa-stack-2x)＋ fa-twitter(fa-stack-1x)
設定内容
<span class="fa-stack">
<i class="fa fa-stack-2x fa-square-o"></i>
<i class="fa fa-stack-1x fa-twitter"></i>
</span>続いてこちらは、四角とツイッターのアイコンを重ねています。今回は、下の四角アイコンは2倍サイズで上のツイッターアイコンは標準サイズで設定しています。このように作成するアイコンによって、上下どちらもサイズ変更が可能です。
＝ square(fa-stack-2x)＋ fa-twitter(fa-stack-1x, fa-inverse)
設定内容
<span class="fa-stack">
<i class="fa fa-stack-2x fa-square"></i>
<i class="fa fa-stack-1x fa-twitter fa-inverse"></i>
</span>続いてこちらは、クラス「fa-inverse」を利用した事例です。「fa-inverse」のスタイルを確認するとフォント色が「白(#ffffff)」で設定されています。inverseは「逆」という意味なので、文字が黒から白に反転するという意味合いかと思います。
利用方法としては重ねるアイコン同士が黒塗りの場合、片方のアイコンを白塗りにすることで白抜きのアイコンが出来上がります。
独自でアイコンフォントのクラスを設定する方法
ここまで、「font-awesome.min.css」の利用方法について解説してきましたが、アイコンフォントを独自のクラスで設定したい場合もあります。最後に、独自でアイコンフォントのクラスを設定する方法について解説していきます。
①アイコンフォントのUnicodeを確認
まず、独自でアイコンフォントのクラスを設定する場合、アイコンフォントのUnicodeを確認しておく必要があります。こちらでは、アイコンフォントのUnicodeを確認する方法を解説します。
「Font Awesome」サイト上部メニューの「Icons」をクリックします。
クリックすると、アイコンフォント一覧が表示されますので、利用したいアイコンフォントをクリックします。
次にアイコンフォントの表示結果と利用方法が掲載されているページに移動します。アイコン表示の下部にある「Unicode: ****」がUnicodeになります。ちなみに今回のハートアイコンのUnicodeは「f184」になります。
もちろん、こちらもその都度アクセスするのが手間ですので、「Font Awesomeのアイコンフォントギャラリー」で簡単にUnicodeをコピーすることができます。
①独自のクラスを設定
それでは、実際に設定していきます。独自のクラスでアイコンフォント「Font Awesome」を利用するには、font-familyプロパティに「FontAwesome」を設定する必要があります。これによりアイコンフォントを利用することができます。
次に、contentプロパティにUnicodeを設定します。Unicodeについては先ほど解説したように設定したいUnicodeを事前に取得しておきます。
尚、Unicodeを設定する場合は「\f184」のように「バックスラッシュ(円マーク)＋ Unicodeコード」で設定します。
以下が、実際に独自のクラスを設定したアイコンフォントになります。「fa-****」の形式では既存のクラスと被る可能性があるので、今回は「fa***」の形式にしています。
ハートのアイコン
設定内容
<p class="faHeart">ハートのアイコン;</p>.faHeart:before {
font-family: 'FontAwesome';
content: "\f184";
color: #f00;
font-weight: bold;
}今回は、フォント設定以外に色や太さも同時に設定しています。このようにfont-familyプロパティに「FontAwesome」を設定することで、自由に独自のクラスを作成することが可能です。
ただし、こちらはテキストの前にアイコンが来るのでアイコンとテキストの間に余白がありません。実際に利用する場合は余白を空ける場合が多いので、僕は以下のように設定しています。
ハートのアイコン
.faHeart2:before {
font-family: 'FontAwesome';
content: "\f184 \0020";
color: #f00;
font-weight: bold;
}表示を見て分かるようにハートアイコンとテキストの間にスペースが入っています。今回は、contentプロパティにUnicodeのスペース「0020」を追加しています。Unicodeのスペースは他に「00A0」もありますが、こちらは改行禁止スペースですので、場合によってはレイアウトがずれる場合もあります。
スペースについてはその点を理解した上で、用途によって使い分けましょう。今回は、折り返しができる「0020」を利用しています。
まとめ
今回、500以上のアイコンフォントを表示できる「Font Awesome」について解説しました。画像を利用せずにフォントとしてアイコン表示ができるのでとても便利です。スマホページのアイコンにも利用できて結構重宝しています。
参考書籍
HTML5×CSS3でスマホとタブレットにほぼ完全に対応したレスポンシブデザインを本格的に学ぶことができる。Webページを制作していく上で、Font-Awesomeによるアイコンフォントの使い方など様々なテクニックがまとめられている。スマートフォンなど多様なデバイスに対応しており、使い勝手や見栄えを向上させるTipsをたくさん学べる。
