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

Design css :デザイン
Design
記事内に広告が含まれています。

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

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

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

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

Design

↑_部分だけ適用表示された

PR広告

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” 水平かつ垂直に反転

 目次に戻る


コメント

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