FontAwesome

2017年2月8日その他

どうしてもアイコンを回転したままにしたかったので、いろいろ検索したのですが、FontAwesomeでもできることがわかりました。これまで、ただ単に表示するためだけにしか利用していませんでしたが、公式サイトをみてみると、意外にも、いろいろなクラスがあり、これは使えるかもと思いました。拡大や角度を変える、又は、回転させるなど、FontAwesomeのクラスで指定するだけで可能となります。ただ、使用するクラスによってはブラウザに対応していないようなことも書いてあるので、このあたりは注意が必要です。下記に、メモがてらにこれから使いそうなものだけピックアップしました。

拡大

fa-1x,fa-2x,fa-3x… fa-5x 拡大指定。

1
2
3
4
5
<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
fa-2x
fa-3x
fa-4x
fa-5x

囲い枠をつける

1
<i class="fa fa-border fa-camera-retro fa-5x"></i> fa-5x

左寄せ右寄せ

1
2
<i class="fa fa-border fa-pull-left fa-camera-retro fa-3x"></i>
<i class="fa fa-border fa-pull-right fa-camera-retro fa-3x"></i>

fa-pull-left, fa-pull-right　で確認したが、このサイト上では、コンフリクトしているせいか表示することができませんでした。おそらく他のサイトならできると思います。Cssから直接又は、Bootstrapでもpull-left やpull-rightを使えば可能ですので、実際に利用することはないと思いますが。

アイコンの幅の調整

リストなどアイコンによって、サイズがことなるため、それにより、若干のずれが発生しますが、クラスにfa-fwを指定することで解消します。

1
2
3
4
5
6
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
  Home
  Library
  Applications
  Settings

回転アニメーション

fa-spin と fa-pulse があるが、fa-pulseが8段階でカクカクまわる。また、オプションでは、fa-spinner、fa-refresh、fa-cog があるがイマイチ、その違いがわからない。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
 
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
 
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
 
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
 
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>


Loading…


Loading…


Loading…


Loading…


Loading…

回転の反転

回転　fa-rotate-　90　180　270
※標準の角度を利用するだけで、クラスからは設定できない。
水平反転　fa-flip-horizontal
垂直反転　fa-flip-vertical

1
2
3
4
5
6
<i class="fa fa-shield"></i> normal
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

その他にもアイコンを重ねたり、いろいろサンプルが公式サイトにあるので、興味のある方はご覧ください。