超豐富圖示字型 Icon Font - 使用 FontAwesome

日期：


製作網頁時要考慮到美編的內容和工作，所以會在網頁中加入一些小ICON的圖示，
主要是用來增加網站的美觀；另一方面是用來讓瀏覽者好辨識該按鈕的內容，也就是我們俗稱的UI（User Interface - 使用者介面）

目前FontAwesome 釋出第五版，在 FontAwesome 5 中，除了分享如何使用我們同時來了解 FontAwesome 5 帶來什麼新功能。

不過以往的方式對網頁設計師相當麻煩，因為在設計網站的過程中，必須自己去網路蒐集或請美編人員設計這樣的ICON，再者，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：
  1. ICON風格不一樣，造成美觀上會有落差
  2. 所有的ICON都要蒐集或交由美編人員去製作，製作速度非常慢
  3. 所有ICON都是
  4. 用圖示的方式，所以網站的流量較大，甚至有可能較慢
  5. 因為是圖片的關係，所以有時放大或縮小，會造成圖示的失真
有鑑於此，今天就是要分享 Font Awesome 的套件，它的原理是把圖示ICON都製作成文字的字型 (Fonts)，然後再透過CSS的技術去呼叫圖示ICON出來，所以它擁有以下幾個優點：
  1. 圖示放大、縮小不失真
  2. 呼叫使用相當簡單，可變化多種模式
  3. 一個字型卻擁有超過400個圖示ICON
  4. 免費使用，不必擔心版權問題
  5. 不須要使用JavaScript，只須要懂CSS即可
  6. 支援LESS與SASS

圖示有四個類別分別是 SOLID, REGULAR, LIGHT, BRANDS


進入官網「圖示」頁面後會發現，所有圖示依照以下方式呈現：
  • 深色：免費版可使用的圖示
  • 淺色：滑鼠經過會如上圖，出現「Pro」字樣，代表為付費版圖示

在使用時，不再需要一次載入一大包所有的圖示，而是可以根據自己的需要，分別載入這 4 類型的圖示。
至於要怎麼知道該類型中有哪些圖示，可以到搜尋 ICONs 的地方，透過左邊的篩選視窗來看哪些圖示屬於哪些類別：


  • SOLID：「實心/粗」→ 大部分為免費
  • REGULAR：「一般」→ 少部分為免費
  • LIGHT：「空心/細」→ 付費
  • BRANDS：「品牌 logo」→ 免費


所以安裝了 Font Awesome 5 後，除非付費買 Pro 版，否則能使用的圖示比以前少很多。

需特別留意如果只載入BRADNS 類型的圖示，但卻想要使用 Solid 類型的圖示是沒有辦法的，圖示會沒辦法顯示出來。

是否付費就看個人了，不過還好官網仍保留舊版的說明頁面，還是有免費的管道可使用 Font Awesome。

舊版

進入頁面後，就能使用所有免費圖示了。


CDN 安裝方式

想使用 Font Awesome 5 ，可繼續看以下的安裝說明。

1. 安裝 CSS


官網提供了 CSS 的免費 CDN 外連，可在範本中 </head> 之前插入以下程式碼引用 csss 檔：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

2. 圖示使用方式

以下是常見的向下箭頭圖示，網址為：



複製左下角紅框處的 HTML 碼，貼到網頁要顯示圖示的位置即可：

<i class="fas fa-arrow-alt-circle-down"></i>

右上角的紅框處可看到「SOLID」、「REGULAR」為免費版可使用的圖示類型，「LIGHT」標示 "PRO" 字樣，為付費版圖示。

3. 推薦透過 JavaScript 載入 SVG 圖示


在 FontAwesome 5 過去以 CSS 使用 Webs Font（Web Fonts with CSS），
也提供了在「桌機」上使用（Desktop Use），以及 Sprites, Package, APIs 等進階選項（Advanced Options）。更重要的是，在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式（SVG with JS）來使用這些圖示。

大家都知道 SVG 向量圖形在操控上的彈性非常的大，而 JS 幾乎可以改變網頁上所有的元件，因此這兩者互相搭配之下，可以做出的操作和效果自然比起前一版 FontAwesome 彈性大了非常多。

載入 JS

把 svg-with-js 的資料夾複製一份到你的專案資料夾中（或者也可以直接使用 FontAwesome CDN），字型轉為 SVG 圖片，能等比例放大縮小。接著載入 JS 的方式非常簡單，就和過去載入 CSS 一樣，官方建議放在 <head></head> 內：

<!-- 一次載入所有的圖示 -->
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<!-- 選擇所需圖示類型的載入 -->
<!-- 這裡會載入 SOLID, REGULAR, BRANDS 圖示，最後要記得載入 fontawesome.js -->
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/solid.js" integrity="sha384-YmNA3b9AQuWW8KZguYfqJa/YhKNTwGVD5pQc1cN0ZAVRudFFtR17HR7rooNcVXe4" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/regular.js" integrity="sha384-YdSTwqfKxyP06Jj3UzTeumv8M+Pme60+KND4oF+5r5VeUCvdkw7NhSzFYWbe00ba" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/brands.js" integrity="sha384-4BRtleJgTYsMKIVuV1Z7lNE29r4MxwKR7u88TWG2GaXsmSljIykt/YDbmKndKGID" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/fontawesome.js" integrity="sha384-QcnrgQuRmocjIBY6ByWMmDvUg3HO4MSdVjY7ynJwZfvTDhVPPQOUI9TRzc6/7ZO1" crossorigin="anonymous"></script>


留言

張貼留言