0

「Font Awesome」利用サンプル集

「Font Awesome」利用サンプル集

前回の記事、「Font Awesome」ウェブアイコンフォントの利用方法の続きとして、実際に「Font Awesome」を利用しながら、オプションとして指定できるサンプルを見ていきたいと思います。

▼目次

  1. アイコンサイズを大きくする
  2. アイコンの表示する幅を統一する
  3. リストアイコンとして利用する
  4. 四角で囲って利用する
  5. 回り込んで利用する
  6. 回転させて利用する
  7. 反転させて利用する
  8. 重ねて利用する

実際の表示確認用としてサンプルをご用意しましたので、確認してみてください。

デモサンプル

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です。

※CSS補足

「.fa-lg」「.fa-2x」「.fa-3x」「.fa-4x」「.fa-5x」に指定されているスタイルは以下のようになります。

2.アイコンの表示する幅を統一する

アイコンの表示する幅を統一する

使用するアイコンによって、横幅のサイズが違ってしまうという問題があります。デフォルトの設定だけでは下図のようにズレて表示されてしまうのでこれを解消していきます。

デフォルト

アイコンの表示する幅を統一する

.fa-fwを指定

後ろに記載するテキストのはじまりが揃わない。これをきれいに揃えたい場合には、「.fa-fw」を指定すればOKです。

幅を揃える

※CSS補足

3.リストアイコンとして利用する

リストアイコンとして利用する

リストマークとしてアイコンを利用する場合には、<ul>要素に対して「.fa-ul」、<li>要素に対して「.fa-li」を指定します。

※CSS補足

<li>要素に対して「absolute」で位置を指定しています。アイコンによっては中央配置にならないという可能性もありますので、そういった場合は「top」の値で調整するか、「line-height」で調整をするなどの方法をお試しください。

4.四角で囲って利用する

四角で囲って利用する

ボーダーが薄くて見えにくいですが…。「.fa-border」を指定することで囲い線が表示されるようになります。

※CSS補足

5.回り込んで利用する

回り込んで利用する

テキストとアイコンの位置関係で回り込ませるには、「.pull-left」「.pull-right」によって実現されます。引用符を入れる際には便利ですね。

※CSS補足

floatで左や右に流し込み、marginによってスペースを確保しています。

6.回転させて利用する

回転させて利用する

上図では静止画像になってしまっていますが、このような「ローディング系のアイコンを、くるくる回したい」ときには「.fa-spin」を指定すればOKです。

※CSS補足

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

※CSS補足

8.重ねて利用する

重ねて利用する

星とハートを重ねて表示することもできます。その場合は、ふたつのアイコンを囲む要素(サンプルでは<span>要素)に対し「.fa-stack」を指定し、続けてアイコンをふたつ配置します。その際はサイズを変えて配置するようにします。また、上に配置するアイコンに対して「.fa-invers」を指定し色を変えています。

※CSS補足

実際のところ使いどころが難しいですが、このような利用方法もあるということですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > HTML > 「Font Awesome」利用サンプル集