「Font Awesome」の使い方 3/4
※こちらの記事は「Font Awesome」のバージョン4.0.3をもとに書かれています。バージョンアップにより内容が変更されている場合もありますので、その際は公式サイトを確認してください。
目次
⑧アイコンフォントの回転アニメーション設定
「font-awesome.min.css」には、アイコンの回転アニメーションの設定もできるクラスが用意されています。アイコンを回転させるにはクラス「fa-spin」を利用します。ただし、回転アニメーションにはCSS3のanimationプロパティを利用しているため、IE9以下には対応していません。
設定内容
<i class="fa fa-2x fa-spin fa-spinner"></i>
<i class="fa fa-2x fa-spin fa-circle-o-notch"></i>
<i class="fa fa-2x fa-spin fa-refresh"></i>
<i class="fa fa-2x fa-spin fa-cog"></i>「fa-spin」のスタイル
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}回転アニメーション系のクラスにはもう1つクラス「fa-pulse」があります。こちらは1回転8フレームで設定されており、主に読み込み用のアイコンなどで利用されます。こちらもanimationプロパティを利用しているため、IE9以下には対応していません。
設定内容
<i class="fa fa-2x fa-spin fa-spinner"></i>
<i class="fa fa-2x fa-pulse fa-spinner"></i>「fa-pulse」のスタイル
.fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}⑨アイコンフォントの角度設定
「font-awesome.min.css」には、アイコンの角度を設定できる「fa-rotate-90(90度)」「fa-rotate-180(180度)」「fa-rotate-270(270度)」の3つのクラスが用意されています。それぞれの角度でアイコンを表示させることができます。
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
設定内容
<i class="fa fa-2x fa-shield"></i> normal<br />
<i class="fa fa-2x fa-shield fa-rotate-90"></i> fa-rotate-90<br />
<i class="fa fa-2x fa-shield fa-rotate-180"></i> fa-rotate-180<br />
<i class="fa fa-2x fa-shield fa-rotate-270"></i> fa-rotate-270角度設定のスタイル
.fa-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.fa-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.fa-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
filter: none;
}アイコンの回転にはfilterプロパティが利用されています。
⑩アイコンフォントの反転設定
角度設定以外にも反転設定できる「fa-flip-horizontal(左右反転)」「fa-flip-vertical(上下反転)」の2つのクラスが用意されています。左右反転、上下反転どちらでもアイコンを反転表示させることができます。
normal
fa-flip-horizontal
fa-flip-vertical
設定内容
<i class="fa fa-2x fa-shield"></i> normal<br />
<i class="fa fa-2x fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br />
<i class="fa fa-2x fa-shield fa-flip-vertical"></i> fa-flip-vertical<反転設定のスタイル
.fa-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.fa-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
filter: none;
}こちらもfilterプロパティが利用されています。
⑪アイコンフォントのボーダー設定
「font-awesome.min.css」には、アイコンの周りをボーダーで囲うクラス「fa-border」が用意されています。
normal fa-border
設定内容
<i class="fa fa-2x fa-shield"></i> normal
<i class="fa fa-2x fa-shield fa-border"></i> fa-border「fa-border」のスタイル
.fa-border {
padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}スタイルにはパディングとボーダーが設定されています。
次は、複数のアイコンを重ねる方法や独自クラスを設置する方法について解説していきます。
参考書籍
HTML5×CSS3でスマホとタブレットにほぼ完全に対応したレスポンシブデザインを本格的に学ぶことができる。Webページを制作していく上で、Font-Awesomeによるアイコンフォントの使い方など様々なテクニックがまとめられている。スマートフォンなど多様なデバイスに対応しており、使い勝手や見栄えを向上させるTipsをたくさん学べる。
