Font Awesome アイコンの有効活用

font awesome Test
Font Awesome

icon

                                                                                                                             
No 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 コード 倍率
fa-lg 1.33…
fa-2x 2倍
fa-3x 3倍
fa-4x 4倍
fa-5x 5倍
font awesome
Font Awesome

アニメーション効果

アニメーション、他効果

  
# コード 効果
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

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
バースト
 
# コード 効果
“fas fa-arrows-alt-h”
“fas fa-carrot”none
fa_rotate_030 30deg
fa_rotate_045 45deg
fa-rotate-90 90deg
fa_rotate_135 135deg
fa-rotate-180 180deg
fa_rotate_225 225deg
fa-rotate-270 270deg
fa_rotate_315 315deg
fa_rotate_330 330deg
“fa-flip-horizontal”水平に反転
“fa-flip-vertical” 垂直に反転
“fa-flip-both” 水平かつ垂直に反転
“fas fa-location-arrow”

FontAwesomeと”fa-spin”と”rotate3d”で


コメント

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