2018
03
12

5分鐘快速了解 FontAwesome 5[轉載PJCHENder]

關鍵字:網頁設計icon fontSVG

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

將所有的圖示分成四大類
在 FontAwesome 將所有圖示分成 4 大類,分別是 SOLIDREGULARLIGHTBRADNS

Imgur
在上面的圖示中,各類別下方的圖示如果以藍色顯示,表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。

推薦透過 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 一樣,官方建議放在:

<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js">script>

<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 中透過  標籤同時給予不同的 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 大類,所以在使用時前綴變成了fasfarfal 和 fab ,分別代表 SolidRegularLight 和 Brands
Imgur

※想知道更多請到以下連結喔,裡面會有更多的介紹喔,謝謝※

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.