Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

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

Changed By: JinJin
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

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>
</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>
<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>

<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

修改Font Awesome圖示

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>
Changed By: JinJin
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

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>
</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>
<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>

<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/FontAwesomeCheatsheet.pdf

修改Font Awesome圖示

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

修改Font Awesome圖示
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>
Changed By: JinJin
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

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>
</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>

<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">
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>
<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>

<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/FontAwesomeCheatsheet.pdf

修改Font Awesome圖示
http://mepopedia.com/~jinjin/webclass/Font.pdf

修改Font Awesome圖示
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>
Changed By: JinJin
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

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.0.0/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>

<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">
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>
<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>

<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/FontAwesomeCheatsheet.pdf

修改Font Awesome圖示
http://mepopedia.com/~jinjin/webclass/Font.pdf

修改Font Awesome圖示
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>

Original Message

作者: JinJin
Date: 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

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 一樣,官方建議放在

<head></head>

內:

<!-- 一次載入所有的圖示 --><br /> <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>


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

<!doctype html><br /> <html><br /> <head><br /> <meta charset="UTF-8"><br /> <title> Font Awesome </title><br /> <script defer src=“https://use.fontawesome.com/releases/v5.0.0/js/all.js”></script> <br /> <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script><br /> </head><br /> <body><br /> <br /> </body><br /> </html>


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

<i class="fas fa-camera-retro"></i>

過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類:
在使用時前綴變成了 fas, far, fal 和 fab 
分別代表 Solid, Regular, Light 和 Brands





Font Awesome基本操作



如果只是要調整基本的樣式,可以在圖示外面的
給一個樣式
<div style="font-size:4em; color:blue"><br /> <i class="fas fa-camera-retro"></i><br /> </div>

FontAwesome 5 中有不同的 class 名稱可以直接套用,像是尺寸:

<!-- 尺寸:.fa-xs, .fa-sm, .fa-lg, .fa-2x ~ .fa-10x --><br /> <i class="fa fa-camera-retro fa-xs”></i>



Font Awesome5新增樣式


透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉:

<!--- 縮放: grow-# 或 shrink-# --><br /> <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i><br /> <i class="fas fa-magic" data-fa-transform="grow-6" style=“background:MistyRose"></i>

<!-- - 位置:left-#, right-#, up-#, down-#--><br /> <i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i>


<!--<br /> - 旋轉:rotate-#<br /> - 翻轉:flip-v, flip-h<br /> --><br /> <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>

透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果:

<!--<br /> - 遮罩: data-fa-mask<br /> --><br /> <i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>

透過 fa-layers 可以同時疊合兩個以上的圖示和文字,這是在 FontAwesome 5 中非常實用的效果,可以做出像是圖層的樣式:

<!--<br /> - 圖層:fa-layers<br /> - 文字:fa-layers-text<br /> - 計數:fa-layers-counter<br /> --><br /> <span class="fa-layers fa-fw" style="background:MistyRose"><br /> fa-3x"><br /> <i class="fas fa-spinner fa-spin"></i><br /> <i class="fas fa-circle-notch fa-spin"></i><br /> <i class="fas fa-sync fa-spin"></i><br /> <i class="fas fa-cog fa-spin"></i><br /> <i class="fas fa-spinner fa-pulse"></i><br /> </div>



Font Awesome5新增樣式


透過 data-fa-transform 可以使用縮放、位置、旋轉和翻轉:

<!--- 縮放: grow-# 或 shrink-# --><br /> <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i><br /> <i class="fas fa-magic" data-fa-transform="grow-6" style=“background:MistyRose"></i>

<!-- - 位置:left-#, right-#, up-#, down-#--><br /> <i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i>


<!--<br /> - 旋轉:rotate-#<br /> - 翻轉:flip-v, flip-h<br /> --><br /> <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>

透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果:

<!--<br /> - 遮罩: data-fa-mask<br /> --><br /> <i class="fab fa-facebook-f" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>

透過 fa-layers 可以同時疊合兩個以上的圖示和文字,這是在 FontAwesome 5 中非常實用的效果,可以做出像是圖層的樣式:

<!--<br /> - 圖層:fa-layers<br /> - 文字:fa-layers-text<br /> - 計數:fa-layers-counter<br /> --><br /> <span class="fa-layers fa-fw" style="background:MistyRose"><br /> <i class="fas fa-calendar"></i><br /> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span><br /> </span>



FontAwesome CDN



<div class="fa-4x"><br /> <span class="fa-layers fa-fw" style="background:MistyRose"><br /> <i class="fas fa-calendar"></i><br /> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span><br /> </span><br /> <br /> <span class="fa-layers fa-fw" style="background:MistyRose"><br /> <i class="fas fa-certificate"></i><br /> <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span><br /> </span><br /> <br /> <span class="fa-layers fa-fw" style="background:MistyRose"><br /> <i class="fa fa-envelope"></i><br /> <span class="fa-layers-counter" style="background:Tomato">1,419</span><br /> </span><br /> </div>



舊版Font Awesome練習


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

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

搭配

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

修改Font Awesome圖示
http://mepopedia.com/~jinjin/webclass/Font.pdf

修改Font Awesome圖示
http://mepopedia.com/~jinjin/webclass/font.pdf

修改Font Awesome圖示


於作業一中修改練習


如加入分享連結圖示,並放大兩倍fa-2x

<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">

於標題中加入旋轉圖示
<i class="fas fa-spinner fa-spin"></i>



上課影片


https://youtu.be/BrslTed-BB4