Font Awesomeを有効に使いホームページにインパクトを

font awesomeTest
Font Awesome
Font Awesome

Font Awesomeを有効に使うデザイン

デザイン Font Awesomeを有効に使ってホームページにインパクトを持たせる

  • 適切なFontを選択する
  • Fontに色付けする
  • Fontの大きさを変えてみる
  • Fontを回転させる
  • 2Dだけじゃなく、3Dイメージも

icon

#iconclasscode
“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

コメント

タイトルとURLをコピーしました