アイコンを回転させる
FontAwesomeのアイコンの回転させます。サイト訪問者の注意を引きたい場所やローディング画面で使えます。
FontAwesomeのクラスを使う
FontAwesomeでアイコンを回転させるクラスは２つ用意されています。fa-spinは滑らかに回転するクラスで、fa-pulseはパラパラ漫画のようにカクカク回転するクラスです。
- HTML
<i class="fas fa-spinner fa-spin"></i> <!-- 滑らかに回転 -->
<i class="fas fa-spinner fa-pulse"></i> <!-- カクカクに回転 -->fa-spin
fa-pulse
CSSでスタイルを指定する
CSSでアイコンを回転させたい場合は、まずにdisplay:inline-block;を追加して、animation-〜でアニメーション設定をおこないます。CSSでの設定では回転するスピードなどより細かな設定がおこなえます。
- CSS
/* 滑らかに回転（fa-spin） */
.icon:before{
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f110';
display: inline-block;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: fa-spin;
}
/* カクカクに回転（fa-pulse） */
.icon:before{
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f110';
display: inline-block;
animation-duration: 1s;
animation-timing-function: steps(8);
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: fa-spin;
}