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

今回はサイトで使用しているFont Awesome 5 Freeアイコンを使って、どの様なデザインができるか？その１回目として、FontAwesome5アイコンを組合せて、視覚的なアクセント（着色、拡大、回転、角度変更）を持たせること。また、アイコン・アニメーションなどをご紹介してみます。

※．全く同じ定義をしているにも関わらず、多くの事例を、同時に記載すると、Font Awesome 5 Freeアイコンが正しく表示されない（文字化けや、一瞬だけ表示されたり、部分だけ表示されたり）現象が発生する為、他の例は、改めてご紹介（次回、合成：重ね表示、回転スピード・拡大表示の違いなど）

続きは　 ➡➡➡➡➡➡➡　　ここから

FontAwesomeアイコンでDesign

HTMLなどのコードを表示させたいため、<は＜で、>は＞で置き換えています。

※．f013（fas fa-cog）アイコンを拡大して、虹色グラデーションで動きを付けてみました。
.Background_Text32 {
width:100%;height:100%;line-height:100%;font-size:32px;font-weight:900;
color:transparent;-webkit-background-clip:text;background-clip:text;
background-image:linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
animation:animation_Rainbow32 32s linear infinite;　}
@keyframes animation_Rainbow32 {0%{background-position:0 0} 100%{background-position:600px 0px}}

※．f013を３つネスト（入れ子）回転
f013アイコンを＜dic class=”c_red fas fa-cog faa-spin animated”>で１つ
＜i class=”Background_Text48 fas fa-cog animation_Rainbow48″>内に＜i class=””>ネストして
.Background_Text48 {
width:100%;height:45px;font-size:48px;font-weight:900;
color:transparent;-webkit-background-clip:text;
background-image:linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
animation : animation_Rainbow48 48s linear infinite; }
@keyframes animation_Rainbow48 {0%{background-position:0 0} 100%{background-position:600px 0px}}

アニメーション効果

　目次に戻る

アニメーション、他効果

※．ここでは、class（animated）を合わせて指定し
点滅、パルス、通過、バック、跳ね、ブルブルなどの表示をご紹介します。
それぞれclass（　faa-flash　faa-pulse 　faa-passing 　faa-passing-reverse　faa-bounce 　faa-ring　）を指定
尚、これらのアニメーションを使う為、
通常のFontAwesome5.cssの他に、
アニメーション用のcssを、CDN 経由で読み込む必要があります。
https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css
　 横揺れ（faa-horizontal ）、縦揺れ（faa-vertical ）、浮遊（faa-float ）は面白いですね！
faa-tada（tadaはリストニア語で、Google翻訳で日本語にすると「それから」だそうです。が、） 何方かが、「ジャジャーン」とされていましたし、表示がぴったりと思ったので…。 　 faa-burst（burst）は、そのままんま、「バースト」ですね。
　 同じアイコンを使っているせいか？シェイクとレンチ風の違いが分かりません！ 　それぞれ別のClass（　faa-shake と　faa-wrench ）が用意されています。

　目次に戻る

回転の角度

※．　”fas fa-carrot”を使って
　”fas fa-carrot”の通常表示（元の傾き）から
　様々な、角度を適用して、”fas fa-carrot”の傾き表示を実現しました。
　追加のclass欄にある「fa-rotate-90」など、”-“のものは、FontAwesome5で用意されているものです。
　追加のclass欄にある「fa_rotate_030」など、”_”のものは、cssに追加登録しました。
　新しい定義は、以下の様に追加しました。
　「　.fa_rotate_345 { transform: rotate(345deg);}　」
　また、🥕は、class=”c_orange”で着色しています。
（葉っぱの色をライム グリーンに出来なかったのは残念です。）
　「　.c_orange {color: rgba(255, 165, 000,1);}　」

　目次に戻る