Font Awesomeを有効に使うデザイン
デザイン Font Awesomeを有効に使ってホームページにインパクトを持たせる
- 適切なFontを選択する
- Fontに色付けする
- Fontの大きさを変えてみる
- Fontを回転させる
- 2Dだけじゃなく、3Dイメージも
icon
| # | icon | class | code |
|---|---|---|---|
| “fas fa-car-side” | f5e4 | ||
| “fas fa-angle-double-right” | f101 | ||
| “fas fa-arrow-right” | f061 | ||
| ➡ | “fas fa-caret-square-right” | f152 | |
| ➡ | “far fa-caret-square-right” | f152 | |
| “fas fa-anchor” | f13d | ||
| “fas fa-baseball-ball” | f433 | ||
| ➡ | “fas fa-futbol” | f1e3 | |
| ➡ | “far fa-futbol” | f1e3 | |
| ➡ | “fas fa-bell” | f0f3 | |
| ➡ | “far fa-bell” | f0f3 | |
| “fas fa-bicycle” | f206 | ||
| “fas fa-biking” | f84a | ||
| “fas fa-chalkboard” | f51b | ||
| “fas fa-chalkboard-teacher” | f51c | ||
| “fas fa-check” | f080 | ||
| “fas fa-check-double” | f00c | ||
| ➡ | “fas fa-check-square” | f14a | |
| ➡ | “far fa-check-square” | f14a | |
| ➡ | “fas fa-check-circle” | f058 | |
| ➡ | “far fa-check-circle” | f058 | |
| “far fa-comments” | f086 | ||
| “fas fa-coins” | f51e | ||
| “fas fa-at” | f1fa | ||
| “fas fa-cogs” | f085 | ||
| “fas fa-cog” | f013 | ||
| “fas fa-atom” | f5d2 | ||
| “fas fa-barcode” | f02a | ||
| “fas fa-qrcode” | f029 | ||
| “fab fa-chromecast” | f838 | ||
| “fab fa-facebook-f” | f39e | ||
| “fab fa-facebook” | f09a | ||
| “fab fa-facebook-square” | f082 | ||
| “fab fa-twitter” | f099 | ||
| “fab fa-twitter-square” | f081 | ||
| “fas fa-bus” | f207 | ||
| “fas fa-female” | f182 | ||
| “fas fa-male” | f183 | ||
| ➡ | “far fa-envelope” | f0e0 | |
| ➡ | “fas fa-envelope” | f0e0 | |
| “fas fa-mail-bulk” | f674 | ||
| ➡ | “far fa-smile” | f118 | |
| ➡ | “fas fa-smile” | f118 | |
| ➡ | “fas fa-star” | f005 | |
| ➡ | “far fa-star” | f005 | |
| “fas fa-star-half-alt” | f5c0 | ||
| “fas fa-music” | f001 | ||
| “fas fa-ship” | f21a | ||
| ➡ | “fas fa-heart” | f004 | |
| ➡ | “far fa-heart” | f004 | |
| “fas fa-sync” | f021 | ||
| “fas fa-sync-alt” | f2f1 | ||
| “fas fa-plane” | f072 | ||
| ➡ | “fas fa-house-user” | e065 | |
| ➡ | “fas fa-house-damage” | f6f1 | |
| ➡ | “fas fa-laptop-house” | e066 | |
| ➡ | “fas fa-home” | f015 | |
| ➡ | “fas fa-h-square” | f0fd | |
| ➡ | “fas fa-headphones” | f025 | |
| ➡ | “fas fa-headphones-alt” | f58f | |
| ➡ | “fas fa-headset” | f590 | |
| “fas fa-file-medical” | f477 | ||
| “fas fa-first-aid” | f479 | ||
| “fas fa-book-medical” | f7e6 | ||
| “fas fa-notes-medical” | f481 | ||
| ➡ | “fas fa-plus-square” | f0fe | |
| ➡ | “far fa-plus-square” | f0fe |
アイコン拡大
| No | コード | 倍率 |
|---|---|---|
| 1 | fa-lg | 1.33… |
| 2 | fa-2x | 2倍 |
| 3 | fa-3x | 3倍 |
| 4 | fa-4x | 4倍 |
| 5 | fa-5x | 5倍 |
アニメーション効果
アニメーション、他効果
| # | コード | 効果 | 実際表示 |
|---|---|---|---|
| ➡ | fa-spin | faa-spin animated とスピードが違う | |
| ➡ | faa-spin animated | fa-spin より早く回転 | |
➡ | background-image: linear-gradient (to right, red, orange, yellow, green, aqua, blue, purple); @keyframes 他、 | animation_Rainbow | |
➡ | background-image: linear-gradient (to right, red, orange, yellow, green, aqua, blue, purple); @keyframes、 Background_Text 他、 | faa-spin animated ＆ animation_Rainbow 指定できるClassに制限の 様で組合せによっては、 “fa-3x”を指定しても 効かない | |
| faa-flash animated | 点滅 | ||
| faa-pulse animated | パルス | ||
| faa-passing animated | 通過 | ||
| faa-passing-reverse animated | バック | ||
| faa-shake animated | シェイク | ||
| faa-wrench animated | ひねる、ねじる レンチ風 | ||
| faa-bounce animated | 跳ね | ||
| faa-ring animated | 鳴る、響く ブルブル | ||
| faa-horizontal animated | 横揺れ | ||
| faa-vertical animated | 縦揺れ | ||
| faa-float animated | 浮遊 | ||
| faa-tada animated | ジャジャーン | ||
| faa-burst animated | バースト |
複合 ➡ ３D回転
コメント