2017年12月8日 星期五

5 分鐘快速了解 FontAwesome 5

keywords: icon, logo, fa
Imgur
FontAwesome 正式釋出第五版,在 FontAwesome 5 中,除了主色系從綠色變成藍色之外,究竟第 5 版中還多了哪些新功能呢?讓我們用 5 分鐘快速了解 FontAwesome 5 帶來什麼新功能吧!
本篇內容完全出自 FontAwesome 5 官網的內容,整理後希望能讓大家利用 5 分鐘了解 FontAwesome 5 的主要功能和差異,關於更多其他的使用方式還是建議大家到 FontAwesome 5 逛逛看看。

將所有的圖示分成四大類

在 FontAwesome 將所有圖示分成 4 大類,分別是 SOLID, REGULAR, LIGHT, BRADNS
Imgur
在上面的圖示中,各類別下方的圖示如果以藍色顯示,表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
因此在使用的時候,不再需要一次載入一大包所有的圖示,而是可以根據自己的需要,分別載入這 4 類型的圖示。至於要怎麼知道該類型中有哪些圖示,可以到搜尋 ICONs 的地方,透過左邊的篩選視窗來看哪些圖示屬於哪些類別:
Imgur
要特別留意的是,如果你只載入了 Regular 類型的圖示,但卻想要使用 Solid 類型的圖示,是沒有辦法的,圖示會沒辦法顯示出來。
如果圖示沒辦法正確顯示,確認看看有沒有載入正確的圖示類型。

推薦透過 JS 來載入 SVG 圖示

在 FontAwesome 5 中,除了過去以 CSS 使用 Webs Font 外(Web Fonts with CSS),也提供了在「桌機」上使用(Desktop Use),以及 Sprites, Package, APIs 等進階選項(Advanced Options)。更重要的是,在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式(SVG with JS)來使用這些圖示。
Imgur
由於有多種不同的使用方式,因此下載下來的檔案,會有 4 種不同的資料夾:
Imgur
大家都知道 SVG 向量圖形在操控上的彈性非常的大,而 JS 又幾乎可以改變網頁上所有的元件的,因此這兩者互相搭配之下,可以做出的操作和效果自然比起前一版 FontAwesome 彈性大了非常多。
這篇文章主要說明如何透過 SVG 搭配 JS 的使用方式。

載入 JS

svg-with-js 的資料夾複製一份到你的專案資料夾中(或者也可以直接使用 FontAwesome CDN),接著載入 JS 的方式非常簡單,就和過去載入 CSS 一樣,官方建議放在 <head></head> 內:
<!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<!-- 選擇所需圖示類型的載入 -->
<!-- 這裡會載入 solid 和 regular 這兩類的圖示,最後要記得載入 fontawesome.js -->
<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/regular.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.0/js/fontawesome.js"></script>
各種使用方式在官網都有清楚的說明:Get Started @ FontAwesome
如果你想要馬上來試試看使用 FontAwesome 5 ,可以直接在 CodePen 中載入 FontAwesome 5 的 CDN,就可以直接使用圖示了,或者你也可以點擊這裡,直接進入已經載好 FontAwesome CDN 的 CodePen 中。

使用圖示

圖示的使用幾乎和過去一樣,在 HTML 中透過 <i> 標籤同時給予不同的 class 就會產生不同的圖示:
<i class="fas fa-camera-retro"></i>
和過去不同的地方在於,這個 HTML 結構會透過 JS 轉成真正的一張 SVG
<svg class="svg-inline--fa fa-camera-retro fa-w-16" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="camera-retro" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="...(略)"></path>
</svg>
另外,過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類,所以在使用時前綴變成了 fas, far, falfab ,分別代表 Solid, Regular, LightBrands
Imgur

基本操作

如果只是要調整基本的樣式,可以在圖示外面的 <div> 給一個樣式,圖示會自動繼承父層的樣式:
<div style="font-size:3em; color:Tomato">
  <i class="fas fa-camera-retro"></i>
</div>
和過去一樣在 FontAwesome 5 中寫好了許多不同的 class 名稱可以讓你直接套用,像是尺寸:
<!-- 尺寸:.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs"></i>
特定的圖示一樣可以搭配旋轉動畫 .fa-spin
<!-- 旋轉動畫: .fa-spin -->
<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>
另外還多了固定寬度 .fa-fw,取代項目清單 .fa-ul, .fa-li,邊框 .fa-border,推移 .fa-pull-right, .fa-pull-left

新增功能

由於 FontAwesome 5 是使用 SVG 搭配 JS,使得這些圖示可以做很多不同的變換,像是:
  1. 透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉:
<!--
  - 縮放: grow-# 或 shrink-#
 -->
<i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i>
<i class="fas fa-magic" data-fa-transform="grow-6" style="background:MistyRose"></i>
<!--
  - 位置:left-#, right-#, up-#, down-#
 -->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i>
<!--
  - 旋轉:rotate-#
  - 翻轉:flip-v, flip-h
 -->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
  1. 透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果:
<!--
  - 遮罩: data-fa-mask
 -->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
  1. 透過 fa-layers 可以同時疊合兩個以上的圖示和文字,這是我覺得在 FontAwesome 5 中非常實用的效果,可以做出像是圖層的樣式:
27 NEW 1,419
<!--
  - 圖層:fa-layers
  - 文字:fa-layers-text
  - 計數:fa-layers-counter
 -->

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>

直接在桌機版套用字體

過去設計在使用 FontAwesome 的字體的時候,可能需要額外下載 FontAwesome 的圖示下來使用,在 FontAwesome 5 中,這些圖示可以直接安裝到桌機上使用。在下載的檔案中可以找到 use-on-desktop 的資料夾,把裡面的字型安裝好之後就可以直接使用了:
Imgur
在使用的時候記得要根據所使用的圖示選擇字型,像是屬於 Regular, Solid 或是 Brand
Imgur

避免 FontAwesome 圖示被快取而無法正常顯示

有些時候瀏覽器或外掛/套件的某些快取機制(例如:Trubolinks),會使得 FontAwesome 不知道要重新編譯一次那些 <i></i> 的元素,這時候我們可以使用 FontAwesome API 所提供的 API FontAwesome.dom.i2svg(),讓瀏覽器強制重新解析這些圖示:
  
    document.addEventListener('turbolinks:load', function () {
      FontAwesome.dom.i2svg()
    })
  

參考

這篇文章中簡單的利用 5 分鐘的時間讓大家了解 FontAwesome 5 新增的一些功能和特色,像是將所有的圖示分成 4 大類,更推薦使用 SVG 搭配 JS 的做法來使用圖示等等,內容完全出自 FontAwesome 5 官網的內容,關於更多其他的使用方式還是建議大家到 FontAwesome 5 逛逛看看。
馬上來試試看使用 FontAwesome 5 ,直接在 CodePen 中載入 FontAwesome 5 的 CDN,就可以直接使用圖示了,或者你也可以點擊這裡,直接進入已經載好 FontAwesome CDN 的 CodePen 中。
Share:

0 意見:

張貼留言