FontAwesomeアイコンで、視覚的なアクセントを持たせる（サイトデザイン）の２回目です。
Thank you for reading this post, don't forget to subscribe!今回は、「文字と合わせて表示、Linkも！」、「アイコン重ね表示」、「文字とアイコン重ね表示」、「spinの違い」、「アイコンと”fa-spin”と”rotate3d”で、疑似3Dアニメーション 」などをお伝えしたいと思います。
前回の
「FontAwesomeアイコンデザイン １」は、
ここからどうぞ
FontAwesomeアイコンでサイトデザイン
アイキャッチは.gif
アイキャッチ画像はアニメーション.gifだけど、実際のコードからの実行では、以下の様にもっと滑らかなアニメーションになる。
3D
アニメーション効果
拡大、重ね(アイコン・文字)、着色、アニメーション
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は５倍表示）
.c_wi {color:whitesmoke !important;} ：Linkを白文字表示させるため
※．２つのアイコン重ね表示
重ねたい２つのアイコンの 親要素 （＜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”:３倍 | |
| f0fe | class=”fas fa-plus-square” class=”fas fa-plus-square fa-2x” | |
| f015 & f0fe | Dental_Office | ２つのアイコン重ね表示:重ねたい２つのアイコンの 親要素（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 | ２つのアイコン重ね表示 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：ラージ |
コメント