FontAwesomeアイコンで、視覚的なアクセントを持たせる(サイトデザイン)の2回目です。
今回は、「文字と合わせて表示、Linkも!」、「アイコン重ね表示」、「文字とアイコン重ね表示」、「spinの違い」、「アイコンと”fa-spin”と”rotate3d”で、疑似3Dアニメーション 」などをお伝えしたいと思います。
前回の
「FontAwesomeアイコンデザイン 1」は、
ここからどうぞ
FontAwesomeアイコンでサイトデザイン
拡大、重ね(アイコン・文字)、着色、アニメーション
HTMLなどのコードを表示させたいため、<は<で、>は>で置き換えています。
※.文字と合わせて表示、 Linkも!
< i class=”fas fa-swatchbook fa-5x” style=”color:rgb(255, 255, 255);”>< /i>
< a href=”https://xn--ecka7j.biz/category/site-operation/design/” target=”_blank”>
< span style=”color:wheat;font-weight:900;font-size:200%;”> Design </a >
class=”fas fa-swatchbook fa-5x” (fa-5xは5倍表示)
.c_wi {color:whitesmoke !important;} :Linkを白文字表示させるため
※.2つのアイコン重ね表示
重ねたい2つのアイコンの 親要素 (<span>要素)に fa-stackクラスを追加。
< span class=”c_wi”> .main_wrapper_s2 < /span >{
土台となるアイコンにfa-stack-2xクラスを追加。 合わせて、土台となるアイコンの色(style=”color:#ffc0cb”)を追加。
その上に
重ねるアイコンにfa-stack-1x fa-inverse クラスを追加。
fa-stack-1x クラスが、土台のアイコンのfa-stack-2xクラスの半分であることが大事。
合わせて、色(style=”color:#ff0000″)を追加。
※.後から記述されたアイコンが前面に表示されます。( fa-inverseクラスで色の反転(反転色は追加した#ff0000))
(knock-out looking effect)
最後の< /i >の後から、アイコンと一緒に表示させる文字の表示の為の修飾をします。
<br>< span style=”font-weight:900;font-size:50%;text-align:center;”>Dental_Office< /span >
<span class=”fa-stack fa-2x“><i class=”fas fa-home fa-stack-2x” style=”color:#00ffff;”></i><i class=”fas fa-tooth fa-stack-1x fa-inverse“></i></span>
※.文字とアイコン重ね表示< span class=”fa-stack fa-2x”>
< i class=”fas fa-home fa-stack-1x” style=”color:rgb(0, 145, 255);”>< /i >
< i class=”fa-stack-1x”>< b > 歯 < /b >< /i >< /span >
など、
# | 表示 | 定義 |
---|---|---|
f5c3 | Design | 文字と合わせて表示、Linkも! <i class=”fas fa-swatchbook fa-5x” style=”color:rgb(255, 255, 255);”></i> <a href=”https://xn--ecka7j.biz/category/site-operation/design/” target=”_blank”> <span style=”color:wheat;font-weight:900;font-size:200%;”> Design</a> |
f47e | class=”fas fa-hospital-symbol fa-2x”:2倍表示 | |
f015 | class=”fas fa-home” class=”fas fa-home fa-3x”:3倍 | |
f0fe | class=”fas fa-plus-square” class=”fas fa-plus-square fa-2x” | |
f015 & f0fe | Dental_Office | 2つのアイコン重ね表示:重ねたい2つのアイコンの 親要素(span要素)にfa-stackクラスを追加。 土台となるアイコンにfa-stack-2xクラスを追加。(style=”color:#ffc0cb”) その上に重ねるアイコンに fa-stack-1x fa-inverseクラスを追加。(style=”color:#ff0000″) 後から記述されたアイコンが前面に表示されます。 fa-inverseクラスで色の反転(knock-out looking effect) 最後の</i>の後から <br><span style=”font-weight:900;font-size:50%;text-align:center;”>Dental_Office</span> |
f015 & f5c9 | 2つのアイコン重ね表示 span class=”fa-stack fa-2x” class=”fas fa-home fa-stack-2x” style=”color:#00ffff;” class=”fas fa-tooth fa-stack-1x fa-inverse“ | |
f015 & f5c9 | 歯 | 文字とアイコン重ね表示 <span class=”fa-stack fa-2x”> <i class=”fas fa-home fa-stack-1x” style=”color:rgb(0, 145, 255);”></i> <i class=”fa-stack-1x”><b>歯</b></i></span> |
f5c9 | <td class=”w55″ style=”background-color:#0000ff”> <i class=”fas fa-tooth fa-inverse fa-3x”></i></td> | |
f248 | class=”fas fa-object-ungroup” class=”fas fa-object-ungroup fa-2x” | |
class=”far fa-object-ungroup” class=”far fa-object-ungroup fa-2x” | ||
f247 | class=”fas fa-object-group” class=”fas fa-object-group fa-2x” | |
class=”far fa-object-group” class=”far fa-object-group fa-2x” | ||
f2bb | class=”fas fa-address-card” class=”fas fa-address-card fa-2x” | |
class=”far fa-address-card fa-2x” | ||
f100 | class=”fas fa-angle-double-left fa-2x” | |
f104 | class=”fas fa-angle-left fa-2x” | |
f053 | class=”fas fa-chevron-left fa-2x” | |
f101 | class=”fas fa-angle-double-right fa-2x” | |
f105 | class=”fas fa-angle-right fa-2x” | |
f054 | class=”fas fa-chevron-right fa-2x” |
f197 : class=”fas fa-space-shuttle” スペースシャトル色々
class=”fa-flip-horizontal“
class=”fa-flip-vertical“
class=”fa-rotate-270“ :::スペースシャトルの場合、270度回転で、直立
class=”faa-passing animated“
class=”faa-passing-reverse animated“ :::-reverse:が逆向き
# | 表示 | 定義 |
---|---|---|
f197 | class=”fas fa-space-shuttle fa-flip-horizontal“: 水平方向に反転 class=”fas fa-space-shuttle fa-flip-horizontal fa-3x” style=”color:rgb(0, 98, 255)” | |
class=”fas fa-space-shuttle fa-flip-vertical“: 垂直方向に反転 class=”fas fa-space-shuttle fa-flip-vertical fa-3x” style=”color:color:#0062ff” | ||
class=”fas fa-space-shuttle fa-rotate-270“ class=”fas fa-space-shuttle fa-rotate-270 fa-2x” style=”color:rgb(0, 198, 255)” | ||
class=”fas fa-space-shuttle faa-passing animated fa-2x” style=”color:lime;” 「追加のアニメーションClass」 | ||
class=”fas fa-space-shuttle faa-passing-reverse animated fa-2x” style=”color:#00ffff” 「追加のアニメーションClass」 |
spin回転の違い
※.FontAwesome5標準のclass
“fa-spin” と
追加のアニメーションclass
“faa-spin“の回転スピードの違い
尚、追加のアニメーションClassを使用する為には、
アニメーション用のcssを、CDN 経由で読み込む必要があります。
https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css
合わせて、(animated)を指定する必要があります。
尚、追加のアニメーションの種類は、
FontAwesomeアイコンでDesign 1
を参照ください。
# | 表示 | 定義 | ||
---|---|---|---|---|
f013 | fa-spin:回転 class=”fas fa-cog fa-spin fa-3x” | |||
faa-spin animated:より早く回転 class=”fas fa-cog faa-spin animated fa-3x”「追加のアニメーションClass」 |
3Dアニメーション
※.“rotate3d”
transform-style:preserve-3d;
transform-styleプロパティは、
要素の子要素を 3D 空間に配置(preserve-3d)するか、平面化して要素の平面に配置(flat)するのかを設定。
preserve-3dは 要素の子要素を 3D 空間に配置する
アイコンと”fa-spin”と”rotate3d“で、疑似3Dアニメーション
.main_wrapper_s2 {
display:flex;position:relative;transform-style:preserve-3d;
perspective:300px;left:0;top:0;bottom:0;right:0;
align-items:center;justify-content: center; }
.sphere_wrapper_s2 {
transform-style:preserve-3d;width:300px;height:300px;position:relative;
animation:rotate3d_s32 32s linear infinite; }
@keyframesrotate3d_s32 {
0% {transform: rotateX(0) rotateY(0); }
100% {transform: rotateX(-360deg) rotateY(-720deg); } }
# | 表示 | 定義 |
---|---|---|
f013 | アイコンと”fa-spin”と”rotate3d”で3D回転アニメーション効果:虹色変化 class=”Background_Text32 fas fa-cog animation_Rainbow32″ |
回転の角度(Class)
※.以下の表にあるようなクラスを指定することで、アイコンを回転や反転することができます。
# | クラス | 回転の角度 |
---|---|---|
fa-rotate-90 | 90° | |
fa-rotate-180 | 180° | |
fa-rotate-270 | 270° | |
fa-flip-horizontal | 水平方向に反転 | |
fa-flip-vertical | 垂直方向に反転 |
回転の角度(実例)
rotateと、
「fa-flip-horizontal」:水平方向に反転。
「fa-flip-vertical」::垂直方向に反転。
# | 表示 | 回転の角度 |
---|---|---|
f52e | class=”fas fa-frog” 指定なし | |
f52e | class=”fas fa-frog fa-rotate-90″ | |
f52e | class=”fas fa-frog fa-rotate-180″ | |
f52e | class=”fas fa-frog fa-rotate-270″ | |
f52e | class=”fas fa-frog fa-flip-horizontal” | |
f52e | class=”fas fa-frog fa-flip-vertical” |
サイズ適用(Class)
※.アイコンサイズのClassでの指定方法
以下のclassが標準で用意されています。
表示 | Class | サイズ | 備考 | |
---|---|---|---|---|
fa-xs | .75em | 「Extra Small」 | ||
fa-sm | .875em | スモール | ||
無指定 | 1em | 通常サイズ | ||
fa-lg | 1.33em | ラージ | ||
fa-2x | 2em | 2倍 | ||
fa-3x | 3em | 3倍 | ||
fa-4x | 4em | 4倍 | ||
fa-5x | 5em | 5倍 | ||
fa-6x | 6em | 6倍 | ||
fa-7x | 7em | 7倍 | ||
fa-8x | 8em | >8倍 | ||
fa-9x | 9em | 9倍 | ||
fa-10x | 10em | 10倍 |
サイズ適用(Scaling)
※.拡大・縮小(Scaling)
アイコンを拡大・縮小するには、data-fa-transform 属性に
「grow-#(拡大)」、「shrink-#(縮小)」を指定します。
#には任意の数値(小数可能)を指定し、単位は「1/16em」です。
アイコンのみが拡大・縮小され、そのコンテナの大きさは変わりません。
# | 表示 | <i class=””></i> |
---|---|---|
f0d0 | class=”fas fa-magic fa-xs”:クラスxs指定 | |
f0d0 | class=”fas fa-magic”:指定なし(本来のサイズ) | |
f0d0 | class=”fas fa-magic fa-2x”:クラス2x指定(2倍) | |
f0d0 | class=”fas fa-magic” data-fa-transform=”shrink-8″ :8/16em:0.5emに縮小 | |
f0d0 | class=”fas fa-magic” data-fa-transform=”grow-6″ :6/16em:0.375em拡大 ➡ 1.375em | |
f0d0 | class=”fas fa-magic fa-lg” ➡ 1.33em:ラージ |
コメント