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

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

Thank you for reading this post, don't forget to subscribe!

※．全く同じ定義をしているにも関わらず、多くの事例を、同時に記載すると、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}}

アニメーション効果

#	表示	＜i class=””＞＜／i＞
f013		＜div class=”Background_Text32″＞ ＜i class=”fas fa-cog fa-3x”＞＜/i＞ ＜/div＞ .Background_Text32 { @keyframes animation_Rainbow32 {
f013		＜div class=”c_red fas fa-cog faa-spin animated”＞ ＜i class=”Background_Text48 fas fa-cog animation_Rainbow48″＞ ＜i class=”c_blue fas fa-cog fa-spin”＞＜/i＞ ＜/i＞ ＜/div＞ .Background_Text48 { @keyframes animation_Rainbow48 {

　目次に戻る

---

アニメーション、他効果

※．ここでは、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-star 　c_gold fa-2x	faa-flash animated	点滅
fas fa-heart 　c_pink fa-2x	faa-pulse animated	パルス
fas fa-biking 　c_aqua fa-5x	faa-passing animated	通過
fas fa-car-side 　c_lime fa-3x	faa-passing-reverse animated	バック
fas fa-horse	faa-shake animated	シェイク
fas fa-horse	faa-wrench animated	ひねる、ねじる レンチ風
fas fa-horse 　c_red fa-3x	faa-bounce animated	跳ね
far fa-bell 　c_yellow fa-2x	faa-ring animated	鳴る、響く ブルブル
fas fa-bell 　c_yellow fa-2x	faa-ring animated	鳴る、響く ブルブル
fas fa-arrow-circle-right 　c_pred fa-2x	faa-horizontal animated	横揺れ
fas fa-arrow-circle-up 　c_purple fa-2x	faa-vertical animated	縦揺れ
fas fa-snowboarding	faa-float animated	浮遊
fas fa-tasks 　c_gold	faa-tada animated	ジャジャーン
fas fa-tasks 　c_yellow	faa-burst animated	バースト

　目次に戻る

---

回転の角度

※．　”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);}　」

　

Class	既存 ／ 追加	追加のClass	元の傾きから＋度数	表示
“fas fa-carrot 　c_orange 　fa-2x”	ー	“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_rotate_345	345deg
	既存	“fa-flip-horizontal”	水平に反転
	既存	“fa-flip-vertical”	垂直に反転
	既存	“fa-flip-both”	水平かつ垂直に反転

　目次に戻る

---