デザイン:FontAwesomeアイコンでサイトにメリハリを ２

Designcssで、デザイン
Design
2023.01.12

FontAwesomeアイコンで、視覚的なアクセントを持たせる（サイトデザイン）の２回目です。

今回は、「文字と合わせて表示、Linkも！」、「アイコン重ね表示」、「文字とアイコン重ね表示」、「spinの違い」、「アイコンと”fa-spin”と”rotate3d”で、疑似3Dアニメーション 」などをお伝えしたいと思います。

前回の
「FontAwesomeアイコンデザイン １」は、
　ここからどうぞ

スポンサーリンク

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は５倍表示）
.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＞
f47eclass=”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”
f100class=”fas fa-angle-double-left fa-2x”
f104class=”fas fa-angle-left fa-2x”
f053class=”fas fa-chevron-left fa-2x”
f101class=”fas fa-angle-double-right fa-2x”
f105class=”fas fa-angle-right fa-2x”
f054class=”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-9090°
fa-rotate-180180°
fa-rotate-270270°
fa-flip-horizontal水平方向に反転
fa-flip-vertical垂直方向に反転

　目次に戻る

回転の角度（実例）

rotateと、
「fa-flip-horizontal」：水平方向に反転。
「fa-flip-vertical」：：垂直方向に反転。

#表示回転の角度
f52eclass=”fas fa-frog”　指定なし
f52eclass=”fas fa-frog fa-rotate-90″
f52eclass=”fas fa-frog fa-rotate-180″
f52eclass=”fas fa-frog fa-rotate-270″
f52eclass=”fas fa-frog fa-flip-horizontal”
f52eclass=”fas fa-frog fa-flip-vertical”

　目次に戻る

サイズ適用（Class）

※．アイコンサイズのClassでの指定方法
以下のclassが標準で用意されています。

　
表示Classサイズ備考
fa-xs.75em「Extra Small」
fa-sm.875emスモール
無指定1em通常サイズ
fa-lg1.33emラージ
fa-2x2em2倍
fa-3x3em3倍
fa-4x4em4倍
fa-5x5em5倍
fa-6x6em6倍
fa-7x7em7倍
fa-8x8em>8倍
fa-9x9em9倍
fa-10x10em10倍

　目次に戻る

サイズ適用（Scaling）

※．拡大・縮小（Scaling）
アイコンを拡大・縮小するには、data-fa-transform 属性に
「grow-#（拡大）」、「shrink-#（縮小）」を指定します。

#には任意の数値（小数可能）を指定し、単位は「1/16em」です。
アイコンのみが拡大・縮小され、そのコンテナの大きさは変わりません。

　 　
#表示＜i class=””＞＜／i＞
f0d0class=”fas fa-magic fa-xs”：クラスxs指定
f0d0class=”fas fa-magic”：指定なし(本来のサイズ)
f0d0class=”fas fa-magic fa-2x”：クラス2x指定(2倍)
f0d0class=”fas fa-magic” data-fa-transform=”shrink-8″
：8/16em：0.5emに縮小
f0d0class=”fas fa-magic” data-fa-transform=”grow-6″
：6/16em：0.375em拡大　➡　1.375em
f0d0class=”fas fa-magic fa-lg”　➡　1.33em：ラージ

　目次に戻る

スポンサーリンク

コメント

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