[講義] 使用圖示字體(icon font) Font Awesome (no replies)

1. 圖示字體(icon font)

網頁設計常需要設計小ICON作為辨識內容與增加美觀之用，也為一般所稱之 UI（User Interface - 使用者介面）。
通常網站設計的過程中，由美編人員設計ICON，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：

1.ICON風格都不大一樣，造成美觀上會有落差。
2.製作速度慢，因為所有的ICON都要蒐集或是交由美編人員去製作。
3.所有ICON都是使用圖示的方式，所以網站的流量較大，甚至有可能較慢。
4.因為是圖片的關係，所以有時放大或縮小，會造成圖示的失真。

有鑑於此，目前出現了一些將ICON製作成文字字型，解決上述問題，以 Font Awesome 為例，原理是把圖示ICON都製作成文字的字型 (Fonts)，然後再透過CSS或javascript的技術將圖示ICON呼叫出來，它擁有以下優點：

1.圖示放大、縮小不失真
2.呼叫使用相當簡單，可變化多種模式
3.一個字型卻擁有超過400個圖示ICON
4.免費使用，不必擔心版權問題
5.語法簡單

---

2. 使用圖示字體(icon font) Font Awesome

Font Awesome

https://fontawesome.com

FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。

透過 JS 來載入 SVG 圖示
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。

請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在


內：

<!-- 一次載入所有的圖示 -->

完整語法，接下來請於body內練習

<meta charset="UTF-8"> <title> Font Awesome </title>

在 HTML 中透過 <i> </i>標籤同時給予不同的 class 就會產生不同的圖示

<i class="fas fa-camera-retro"></i>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 
分別代表 Solid, Regular, Light 和 Brands

---

3. Font Awesome基本操作

如果只是要調整基本的樣式，可以在圖示外面的

---

4. Font Awesome5新增樣式

透過 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>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：

<!-- - 遮罩： data-fa-mask --> <i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：

<!-- - 圖層：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>

---

5. FontAwesome CDN

<div class="fa-4x"> <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> <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="fa fa-envelope"></i> <span class="fa-layers-counter" style="background:Tomato">1,419</span> </span> </div>

---

6. 舊版Font Awesome練習

舊版Font Awesome，請以下面網站為例

http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html

搭配

http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf

修改Font Awesome圖示