10分鐘瞭解FontAwesome5

發表於

10分鐘了解 FontAwesome 5

What do you care what other people think? - 理察·費曼

FontAwesome 5

圖示分成四大類

  • FontAwesome 5 - How to use
  • FontAwesome 5 將所有圖示分成 4 大類，分別是 SOLID(實心)， REGULAR(線條)， LIGHT(輕量)，BRADNS(品牌)。
  • REGULAR， LIGHT裡面的大多數圖示都是只有FontAwesome Pro 的使用者才可以使用。

使用 FontAwesome CDN

1
2
<!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"> </script>
1
2
3
4
<!-- 選擇所需圖示類型的載入 -->
<script src="https://use.fontawesome.com/releases/v5.0.0/js/solid.js"> </script>
<script src="https://use.fontawesome.com/releases/v5.0.0/js/bradns.js"> </script>
<script src="https://use.fontawesome.com/releases/v5.0.0/js/fontawesome.js"> </script>

使用圖示

  • 過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類，所以在使用時前綴變成了 fas, far, fal 和 fab
1
2
<i class="fas fa-camera-retro"></i>
<i class="fab fa-font-awesome"></i>

圖示屬性

  • Icon Sizes (圖示大小)

  • fa-xs,fa-sm,fa-lg,fa-2x
1
2
3
4
5
6
7
8
<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>

  • Fixed Width Icons (固定寬度)

  • fa-fw
1
2
3
4
5
<div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
<div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
<div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
<div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
<div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>

  • List Icons (取代項目符號)

  • fa-ul and fa-li
1
2
3
4
5
6
<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

  • Bordered & Pulled Icons (邊框和推移)

  • fa-border and fa-pull-right
1
<i class="fas fa-quote-left fa-2x fa-pull-left fa-border"></i>

  • Animated Icons (旋轉動畫)

  • fa-spin
1
2
3
4
5
6
7
<div class="fa-3x">
    <i class="fas fa-spinner fa-spin"></i>
    <i class="fas fa-circle-notch fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-cog fa-spin"></i>
    <i class="fas fa-spinner fa-pulse"></i>
</div>

Power Transforms

  • Scaling (縮放)

  • grow-#and shrink-#
1
2
3
4
5
<div class="fa-4x">
    <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-magic" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

  • Positioning (位移)

  • up-#, down-#, left-#, and right-#
1
2
3
4
5
6
7
<div class="fa-4x">
    <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

  • Rotating & Flipping(旋轉和翻轉)

  • rotate-#, flip-v, and flip-h
1
2
3
4
5
6
7
8
9
10
<div class="fa-4x">
    <i class="fas fa-magic" data-fa-transform="rotate-90" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate-180" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate-30" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate--30" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="flip-v" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="flip-h" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>

組合圖示

  • Masking (遮罩)

  • data-fa-mask
1
2
3
4
5
<div class="fa-4x">
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
    <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
    <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>

  • Layering, Text, & Counters (圖層,文字和記數)

  • fa-layers , fa-layers-text , fa-layers-counter
1
2
3
4
5
6
7
8
9
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>

<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>