今回はサイトで使用しているFont Awesome 5 Freeアイコンを使って、どの様なデザインができるか?その1回目として、FontAwesome5アイコンを組合せて、視覚的なアクセント(着色、拡大、回転、角度変更)を持たせること。また、アイコン・アニメーションなどをご紹介してみます。
Thank you for reading this post, don't forget to subscribe!※.全く同じ定義をしているにも関わらず、多くの事例を、同時に記載すると、Font Awesome 5 Freeアイコンが正しく表示されない(文字化けや、一瞬だけ表示されたり、部分だけ表示されたり)現象が発生する為、他の例は、改めてご紹介(次回、合成:重ね表示、回転スピード・拡大表示の違いなど)
続きは ➡➡➡➡➡➡➡ ここから
Design
↑_部分だけ適用表示された
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を3つネスト(入れ子)回転
f013アイコンを<dic class=”c_red fas fa-cog faa-spin animated”>で1つ
<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” | 水平かつ垂直に反転 |
コメント