前回の記事、「Font Awesome」ウェブアイコンフォントの利用方法の続きとして、実際に「Font Awesome」を利用しながら、オプションとして指定できるサンプルを見ていきたいと思います。
▼目次
実際の表示確認用としてサンプルをご用意しましたので、確認してみてください。
1.アイコンサイズを大きくする
デフォルト設定のままだと小さめのアイコンが表示されるようになっています。場合によっては大きさを変えて利用したいなどがあれば、以下のような「クラス名」を追加で指定するだけでサイズを調整することができます。
| .fa-lg | 0.75em |
| .fa-2x | 2em |
| .fa-3x | 3em |
| .fa-4x | 4em |
| .fa-5x | 5em |
<i>要素のクラス名に「.fa-lg」「.fa-2x」「.fa-3x」「.fa-4x」「.fa-5x」を指定すればOKです。
|
1 2 3 4 5 |
<p><i class="fa fa-lg fa-envelope-o"></i>fa-lg</p> <p><i class="fa fa-2x fa-envelope-o"></i>fa-2x</p> <p><i class="fa fa-3x fa-envelope-o"></i>fa-3x</p> <p><i class="fa fa-4x fa-envelope-o"></i>fa-4x</p> <p><i class="fa fa-5x fa-envelope-o"></i>fa-5x</p> |
※CSS補足
「.fa-lg」「.fa-2x」「.fa-3x」「.fa-4x」「.fa-5x」に指定されているスタイルは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.fa-lg { font-size: 1.3333333333333333em; 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; } |
2.アイコンの表示する幅を統一する
使用するアイコンによって、横幅のサイズが違ってしまうという問題があります。デフォルトの設定だけでは下図のようにズレて表示されてしまうのでこれを解消していきます。
デフォルト
.fa-fwを指定
後ろに記載するテキストのはじまりが揃わない。これをきれいに揃えたい場合には、「.fa-fw」を指定すればOKです。
|
1 2 3 4 5 |
<p><i class="fa fa-2x fa-fw fa-gift"></i>Icon</p> <p><i class="fa fa-2x fa-fw fa-shopping-cart"></i>Icon</p> <p><i class="fa fa-2x fa-fw fa-user"></i>Icon</p> <p><i class="fa fa-2x fa-fw fa-bookmark-o"></i>Icon</p> <p><i class="fa fa-2x fa-fw fa-heart"></i>Icon</p> |
※CSS補足
|
1 2 3 4 |
.fa-fw { width: 1.2857142857142858em; text-align: center; } |
3.リストアイコンとして利用する
リストマークとしてアイコンを利用する場合には、<ul>要素に対して「.fa-ul」、<li>要素に対して「.fa-li」を指定します。
|
1 2 3 4 5 6 7 |
<ul class="fa-ul"> <li><i class="fa fa-home fa-li"></i>HOME</li> <li><i class="fa fa-bell-o fa-li"></i>NEWS</li> <li><i class="fa fa-subway fa-li"></i>ACCESS</li> <li><i class="fa fa-search fa-li"></i>SEARCH</li> <li><i class="fa fa-rss-square fa-li"></i>RSS</li> </ul> |
※CSS補足
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
<li>要素に対して「absolute」で位置を指定しています。アイコンによっては中央配置にならないという可能性もありますので、そういった場合は「top」の値で調整するか、「line-height」で調整をするなどの方法をお試しください。
4.四角で囲って利用する
ボーダーが薄くて見えにくいですが…。「.fa-border」を指定することで囲い線が表示されるようになります。
|
1 |
<p><i class="fa fa-jpy fa-border fa-5x"></i></p> |
※CSS補足
|
1 2 3 4 5 |
.fa-border { padding: .2em .25em .15em; border: solid 0.08em #eeeeee; border-radius: .1em; } |
5.回り込んで利用する
テキストとアイコンの位置関係で回り込ませるには、「.pull-left」「.pull-right」によって実現されます。引用符を入れる際には便利ですね。
|
1 |
<p><i class="fa fa-quote-left pull-left fa-2x"></i>ここは引用文となっております。ここは引用文となっております。ここは引用文となっております。ここは引用文となっております。ここは引用文となっております。ここは引用文となっております。ここは引用文となっております。<i class="fa fa-quote-right pull-right fa-2x" aria-hidden="true"></i></p> |
※CSS補足
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: .3em; } .fa.pull-right { margin-left: .3em; } |
floatで左や右に流し込み、marginによってスペースを確保しています。
6.回転させて利用する
上図では静止画像になってしまっていますが、このような「ローディング系のアイコンを、くるくる回したい」ときには「.fa-spin」を指定すればOKです。
|
1 2 3 |
<p><i class="fa fa-refresh fa-spin fa-lg"></i></p> <p><i class="fa fa-spinner fa-spin fa-lg"></i></p> <p><i class="fa fa-circle-o-notch fa-spin fa-lg"></i></p> |
※CSS補足
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.fa-spin { -webkit-animation: spin 2s infinite linear; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } |
7.反転させて利用する
90度ごとに回転させたり、反転させたりすることもできます。それぞれ指定が違いますが90度ごとに回転する場合は「.fa-rotate-値」で指定します。反転の場合は「.fa-flip-値」となります。
| 90度回転 | fa-rotate-90 |
| 180度回転 | fa-rotate-180 |
| 270度回転 | fa-rotate-270 |
| 水平反転 | fa-flip-horizontal |
| 垂直反転 | fa-flip-vertical |
|
1 2 3 4 5 6 |
<p><i class="fa fa-2x fa-cube fa-fw"></i></p> <p><i class="fa fa-2x fa-cube fa-fw fa-rotate-90"></i></p> <p><i class="fa fa-2x fa-cube fa-fw fa-rotate-180"></i></p> <p><i class="fa fa-2x fa-cube fa-fw fa-rotate-270"></i></p> <p><i class="fa fa-2x fa-cube fa-fw fa-flip-horizontal"></i></p> <p><i class="fa fa-2x fa-cube fa-fw fa-flip-vertical"></i></p> |
※CSS補足
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.fa-rotate-90 { transform: rotate(90deg); } .fa-rotate-180 { transform: rotate(180deg); } .fa-rotate-270 { transform: rotate(270deg); } .fa-flip-horizontal { transform: scale(-1, 1); } .fa-flip-vertical { transform: scale(1, -1); } |
8.重ねて利用する
星とハートを重ねて表示することもできます。その場合は、ふたつのアイコンを囲む要素（サンプルでは<span>要素）に対し「.fa-stack」を指定し、続けてアイコンをふたつ配置します。その際はサイズを変えて配置するようにします。また、上に配置するアイコンに対して「.fa-invers」を指定し色を変えています。
|
1 2 3 4 5 6 |
<p> <span class="fa-stack fa-lg"> <i class="fa fa-star fa-stack-2x"></i> <i class="fa fa-apple fa-stack-1x fa-inverse"></i> </span> </p> |
※CSS補足
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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; } |
実際のところ使いどころが難しいですが、このような利用方法もあるということですね。