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

Advanced

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

網頁設計與語法（HTML/CSS） 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[講義] 使用圖示字體(icon font) Font Awesome

分類標籤: 網頁設計與語法（HTML/CSS）  106-2《中國》竹視傳二B-進階網頁設計  106-2《中國》竹視傳二C-進階網頁設計  107-1《中國》竹視傳二A-進階網頁設計  107-1《中國》竹視傳二C-進階網頁設計  108-1《中國》竹視傳二A-進階網頁設計
  1. 1. 圖示字體(icon font)
  2. 2. 使用圖示字體(icon font) Font Awesome
  3. 3. Font Awesome基本操作
  4. 4. Font Awesome5新增樣式
  5. 5. FontAwesome CDN
  6. 6. 在 Photoshop, illustrator 中使用 Font Awesome 的字型
  7. 7. 舊版Font Awesome練習
  8. 8. 上課影片

1. 圖示字體(icon font)


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

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

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

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


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


Font Awesome

https://fontawesome.com

如何使用
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 一樣，官方建議放在

<head></head>
內：

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

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

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

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

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




3. Font Awesome基本操作



如果只是要調整基本的樣式，可以在圖示外面的
給一個樣式
<div style="font-size:4em; color:blue"> <i class="fas fa-camera-retro"></i> </div>
FontAwesome 5 中有不同的 class 名稱可以直接套用，像是尺寸：

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

<!-- 旋轉動畫： .fa-spin --> <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>

不換行換顏色及旋轉
<span style="color:#E6005C;"> <i class="fas fa-spinner fa-spin"></i>

4. Font Awesome5新增樣式


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

<!--- 縮放： grow-# 或 shrink-# --> <i class="fas fa-magic" data-fa-transform="shrink-8" style="background:MistyRose"></i> <i class="fas fa-magic" data-fa-transform="grow-6" style=“background:MistyRose"></i>
<!-- - 位置：left-#, right-#, up-#, down-#--> <i class="fas fa-magic" data-fa-transform="left-6" style="background:MistyRose"></i>

<!-- - 旋轉：rotate-# - 翻轉：flip-v, flip-h --> <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
透過 data-fa-mask 可以讓兩個圖示疊合在一起製作遮罩的效果：

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

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

5. FontAwesome CDN



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

6. 在 Photoshop, illustrator 中使用 Font Awesome 的字型


在 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 有列出全部的字型圖案



7. 舊版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

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

8. 上課影片


https://youtu.be/BrslTed-BB4





Edited 9 time(s). Last edit at 10/16/2019 11:26AM by JinJin.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic