トップ > FontAwesome > Font Awesome - アニメーション、サイズ／カラー／角度変更まとめ
最終更新日

Font Awesome - アニメーション、サイズ／カラー／角度変更まとめ

FontAwesome Webデザイン ブログカスタマイズ HTML 備忘録



fontawesome.com

l-lin.github.io


Font Awesome - アイコンアレンジ一覧


コピペでどうぞ~（ちなみにfaはver.4、fasはver.5~、現在のVer.6は「fa-solid」が主流です 。）

アニメーション

アイコン コード 説明
<i class="fa-solid fa-otter fa-beat"></i> Beat
<i class="fa-solid fa-computer-mouse fa-beat-fade"></i> Beat Fade
<i class="fa-solid fa-otter fa-bounce"></i> Bounce
<i class="fa-solid fa-otter fa-fade"></i> Fade
<i class="fa-solid fa-otter fa-flip"></i> Flip
<i class="fa-solid fa-otter fa-shake"></i> Shake
<i class="fa fa-bell faa-ring animated faa-slow"></i> Ring (slow)
<i class="fa-solid fa-bars fa-spin"></i> Spin
<i class="fa-solid fa-otter faa-spin faa-reverse animated"></i> Spin Reverse
<i class="fa-solid fa-otter faa-spin faa-reverse animated faa-fast"></i> Spin Reverse (fast)
<i class="fa-solid fa-otter fa-spin-pulse"></i> Spin Pulse
 hover mouse here <a href="#" class="faa-parent animated-hover"><i class="fa-solid fa-otter faa-wrench fa-2xl"></i>&nbsp;hover mouse here</a> Wrench on hover mouse
<i class="fa fa-envelope faa-horizontal animated faa-slow"></i> Horizontal (slow)
<i class="fa fa-star faa-burst animated"></i> Burst
<i class="fa fa-space-shuttle faa-passing animated ></i> Passing
<i class="fa-brands fa-space-awesome faa-rising animated faa-fast"></i> Rissing
<i class="fas fa-angle-double-down faa-falling animated"></i> Falling
<i class="fa-solid fa-kiwi-bird faa-wrench animated"></i> Wrench


サイズ指定

アイコン コード 説明
<i class="fa-solid fa-otter fa-xs"></i> Extra Small
<i class="fa-solid fa-otter fa-sm"></i> Small
<i class="fa-solid fa-otter"></i> Default
<i class="fa-solid fa-otter fa-lg"></i> Large
<i class="fa-solid fa-otter fa-xl"></i> Extra Large
<i class="fa-solid fa-otter fa-2xl"></i> XL2倍


カラー指定

アイコン コード 説明
<i class="fa-solid fa-otter" style="color: #333;"></i> 日経新聞、5ちゃんねるテキスト
<i class="fa-brands fa-twitter" style="color: rgb(29,161,242);"></i> Twitter
<i class="fa-solid fa-otter" style="color: #e2dc00;"></i> 渋めの黄色
<i class="fa-solid fa-otter" style="color: tomato;"></i> Tomato
<i class="fa-solid fa-arrow-trend-up" style="color: #d51010;"></i> つよい赤
<i class="fa-solid fa-otter" style="color: rgb(254,203,110);"></i> オレンジ
<i class="fa-solid fa-otter" style="color: #d1e69d;"></i> 薄めの緑
<i class="fa-solid fa-otter" style="color: #dc83ac;"></i> 良さげなピンク
<i class="fa-solid fa-otter" style="color: rgba(220, 131, 176, 0.5);"></i> 良さげなピンク半透明


回転角度指定

アイコン コード 説明
<i class="fa-solid fa-hippo fa-rotate-90"></i> 90度回転
<i class="fa-solid fa-hippo fa-rotate-180"></i> 180度回転
<i class="fa-solid fa-hippo fa-rotate-270"></i> 270度回転
<i class="fa-solid fa-hippo fa-flip-horizontal"></i> 水平方向に反転
<i class="fa-solid fa-hippo fa-flip-vertical"></i> 垂直方向に反転
<i class="fa-solid fa-hippo fa-flip-both"></i> 水平＋垂直方向に反転


【番外編】

アイコン コード 説明
<i class="fa fa-hippo"></i> 旧バージョンカバ
<i class="fa fa-otter"></i> 旧バージョンラッコ
<i class="translate fa-solid fa-otter fa-flip"></i> Flip＋Translate
<i class="fa-solid fa-otter fa-flip"></i> 通常のFlip
 hover mouse here <a href="#" class="swing"><i class="fas fa-external-link"></i>&nbsp;hover mouse here</a> Wrench on hover mouse2


Flip＋Translate

.translate.fa-solid {
  position: relative;
  top: 25%;
  left: 25%;
  transform: translate(-50%, -50%);
}

hover mouse2 

a.swing i.fas {
  transform: rotate(90deg);
  transition: transform 0.5s ease-in-out;
}
a.swing:hover i.fas {
  animation: swing 0.5s ease infinite;
}
@keyframes swing {
  0% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(115deg);
  }
  50% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(65deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

CDN

<link id="fontawesome642min" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
<link id="awesome-anime111min" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css" rel="stylesheet">


rubirubi.hateblo.jp

asideコーナー