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

Advanced

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

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


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

搭配
http://mepopedia.com/~jinjin/webclass/font.pdf

修改Font Awesome圖示


8. 於作業一中修改練習


如加入分享連結圖示,並放大兩倍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>


9. 上課影片


https://youtu.be/BrslTed-BB4





Edited 5 time(s). Last edit at 04/30/2018 01:54PM by JinJin.
(編輯記錄)

http://127.0.0.1:52249/preview/app/index.html

心得:雖然一開始沒怎麼搞懂怎麼將語法複製貼上,但我還是成功了