Change History
Message: [講義] 使用圖示字體(icon font) Font Awesome
Changed By: JinJin
Change Date: October 16, 2019 11:26AM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: October 16, 2019 11:26AM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: October 16, 2019 09:09AM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: October 16, 2019 09:09AM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: October 08, 2019 10:28PM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: October 08, 2019 10:28PM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: November 07, 2018 04:35PM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: November 07, 2018 04:35PM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: April 30, 2018 01:54PM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: April 30, 2018 01:54PM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
dia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
dia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: April 06, 2018 10:52PM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: April 06, 2018 10:52PM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: April 06, 2018 10:51PM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: April 06, 2018 10:51PM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf
修改Font Awesome圖示 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類：
在使用時前綴變成了 fas, far, fal 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf
修改Font Awesome圖示 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: March 29, 2018 10:16AM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: March 29, 2018 10:16AM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 <hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：fa-layers
- 文字：fa-layers-text
- 計數：fa-layers-counter
-->
<span class="fa-layers fa-fw" style="background:MistyRose">
ass="fa-layers fa-fw" style="background:MistyRose">
l 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf
修改Font Awesome圖示 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 <hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：fa-layers
- 文字：fa-layers-text
- 計數：fa-layers-counter
-->
<span class="fa-layers fa-fw" style="background:MistyRose">
ass="fa-layers fa-fw" style="background:MistyRose">
l 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf
修改Font Awesome圖示 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Changed By: JinJin
Change Date: March 29, 2018 10:14AM
[講義] 使用圖示字體(icon font) Font Awesome
Change Date: March 29, 2018 10:14AM
[講義] 使用圖示字體(icon font) Font Awesome
<h2>圖示字體(icon font) </h2>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，<script defer src=“https://use.fontawesome.com/releases/v5.0.0/js/all.js”></script>
接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 <hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：fa-layers
- 文字：fa-layers-text
- 計數：fa-layers-counter
-->
<span class="fa-layers fa-fw" style="background:MistyRose">
l 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf
修改Font Awesome圖示 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
網頁設計常需要設計小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.語法簡單
<hr>
<h2>使用圖示字體(icon font) Font Awesome</h2>
<b>Font Awesome</b>
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
FontAwesome 5將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。
各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。
<b>透過 JS 來載入 SVG 圖示</b>
在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。
請把 svg-with-js 的資料夾複製一份到專案資料夾中
或者使用載入 JS，就和過去載入 CSS 一樣，官方建議放在
<xmp><head></head> </xmp>
內：
<xmp><!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script></xmp>
完整語法，<script defer src=“https://use.fontawesome.com/releases/v5.0.0/js/all.js”></script>
接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script></xmp>
完整語法，接下來請於body內練習
<xmp><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Font Awesome </title>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
</head>
<body>
</body>
</html></xmp>
在 HTML 中透過<xmp> <i> </xmp>標籤同時給予不同的 class 就會產生不同的圖示
<xmp><i class="fas fa-camera-retro"></i></xmp>
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 <hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：fa-layers
- 文字：fa-layers-text
- 計數：fa-layers-counter
-->
<span class="fa-layers fa-fw" style="background:MistyRose">
l 和 fab 分別代表 Solid, Regular, Light 和 Brands
<hr>
<h2>Font Awesome基本操作</h2>
如果只是要調整基本的樣式，可以在圖示外面的 <div> 給一個樣式
<xmp><div style="font-size:4em; color:blue">
<i class="fas fa-camera-retro"></i>
</div></xmp>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
<xmp><!-- 尺寸：.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x -->
<i class="fa fa-camera-retro fa-xs”></i></xmp>
<xmp><!-- 旋轉動畫： .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></xmp>
<hr>
不換行<換顏色及旋轉
<b>不換行換顏色及旋轉</b>
<xmp><span style="color:#E6005C;">
<i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>Font Awesome5新增樣式</h2>
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
<xmp><!--- 縮放： 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></xmp>
<xmp><!-- - 位置：left-#, right-#, up-#, down-#-->
<i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i></xmp>
<xmp><!--
- 旋轉：rotate-#
- 翻轉：flip-v, flip-h
-->
<i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i></xmp>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
<xmp><!--
- 遮罩： data-fa-mask
-->
<i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i></xmp>
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
<xmp><!--
- 圖層：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></xmp>
<hr>
<h2>FontAwesome CDN</h2>
<xmp><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<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例 http://mepopedia.com/~jinjin/webclass/FontAwesomeCheatsheet.pdf
修改Font Awesome圖示 http://mepopedia.com/~jinjin/webclass/Font.pdf
修改Font Awesome圖示
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
<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></xmp>
<h2>在 Photoshop, illustrator 中使用 Font Awesome 的字型</h2>
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
修改Font Awesome圖示
<hr>
<h2>於作業一中修改練習</h2>
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
<hr>
<h2>舊版Font Awesome練習</h2>
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
<b>參考舊版Font Awesome圖示列表</b>：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
<xmp><i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x"></xmp>
於標題中加入旋轉圖示
<xmp> <i class="fas fa-spinner fa-spin"></i></xmp>
<hr>
<h2>上課影片</h2>
https://youtu.be/BrslTed-BB4
<iframe width="853" height="480" src="https://www.youtube.com/embed/BrslTed-BB4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Original Message
作者: JinJinDate: March 29, 2018 02:49AM
[講義] 使用圖示字體(icon font) Font Awesome
圖示字體(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.語法簡單
使用圖示字體(icon font) Font Awesome
Font Awesome
https://fontawesome.com
如何使用
https://fontawesome.com/how-to-use/svg-with-js
圖示列表
https://fontawesome.com/cheatsheet?from=io
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內練習
完整語法，接下來請於body內練習
在 HTML 中透過
過去只有 fa 而在 FontAwesome 5 因為將圖示分成了
Font Awesome5新增樣式
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：
不換行<換顏色及旋轉
不換行換顏色及旋轉
Font Awesome5新增樣式
透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉：
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：
透過 fa-layers 可以同時疊合兩個以上的圖示和文字，這是在 FontAwesome 5 中非常實用的效果，可以做出像是圖層的樣式：
FontAwesome CDN
在 Photoshop, illustrator 中使用 Font Awesome 的字型
在 FontAwesome 的官網中也有說明如何直接把這個字型安裝進電腦的作業系統中，
只要先下載好他們的字型，
安裝進去(Mac OS, Windows 都可以)，
就可以當作一般字型那樣使用了
字型檔安裝好了之後，要裝輸入法方便我們輸入 icon font，請安裝Unicode輸入法，先在mac選單列上的輸入法圖示按一下滑鼠左鍵，接著選擇「打開鍵盤偏好設定」
，點選左側下方的「＋」號按鈕，在跳出的視窗左側捲動到最下方，找到「其他」並點選，在右方就能看到「Unicode 十六進位輸入」法了，馬上按右下角的「加入」，就能看到輸入法多了一個「Unicode 十搭配
http://mepopedia.com/~jinjin/webclass/font.pdf
修改Font Awesome圖示
於作業一中修改練習
如加入分享連結圖示，並放大兩倍fa-2x
於標題中加入旋轉圖示
上課影片
https://youtu.be/BrslTed-BB4
修改Font Awesome圖示
於作業一中修改練習
如加入分享連結圖示，並放大兩倍fa-2x
於標題中加入旋轉圖示
上課影片
https://youtu.be/BrslTed-BB4
六進位輸入」
使用文字工具在畫面上單擊，切換輸入法為剛剛安裝的「Unicode 十六進位」輸入法，接著請在鍵盤上按住「alt (PC) / option (MAC)」鍵不放，並依序輸入「f13b」，你會發現怎麼出現一個看起來像是亂碼的東西，請選取這個看起來像是亂碼的文字後，把字體設定為「FontAwesome」就能看到美美的 iocn font
可以到這個頁面中：http://fontawesome.io/cheatsheet/
Font Awesome 有列出全部的字型圖案
舊版Font Awesome練習
舊版Font Awesome，請以下面網站為例
http://www.dreamtemplate.com/templates/7814/valler-landing-page---boostrap-website-template.html
參考舊版Font Awesome圖示列表：http://mepopedia.com/~jinjin/ex/fontawesome.pdf
修改Font Awesome圖示
如加入分享連結圖示，並放大兩倍fa-2x
於標題中加入旋轉圖示
上課影片
https://youtu.be/BrslTed-BB4
MEPO forum
is powered by Phorum.