Font Awesome 一行語法，輕鬆在網頁加入ICON圖示

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

只不過以往的方法，對於網頁設計師人員相當麻煩，因為在網站設計的過程中，他們必須自行去網路蒐集或請美編人員設計這樣的ICON，再者，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：

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

有鑑於此，現在介紹大家一套 Font Awesome 的小套件，它的原理是把圖示ICON都製作成文字的字型 (Fonts)，然後再透過CSS的技術去呼叫圖示ICON出來，所以它擁有以下幾個優點：

1. 圖示放大、縮小不失真
2. 呼叫使用相當簡單，可變化多種模式
3. 一個字型卻擁有超過400個圖示ICON
4. 免費使用，不必擔心版權問題
5. 不須要使用JavaScript，只須要懂CSS即可
6. 支援LESS與SASS

這麼強大又好用的小套件，的確是可以幫助設計師們在網頁設計的過程中，加快製作的速度，但是，這樣的套件究竟要如何安裝並使用它呢？

如何安裝?

首先，你必須先去官方網站下載(Download)最新的版本

前往下載 >

緊接著，解壓縮，解完後應該可以看到以下幾個檔案：

如果使只要使用CSS，僅須要拷貝 "css" 與 "fonts" 兩個資料夾到你的目的地即可，所以安裝的步驟為以下：

之中加入CSS語法

1. 解壓縮
2. 拷貝資料夾(包含Fonts)到目的地
3. 在
4. 完成安裝!

那麼該如何使用它呢？

很簡單，你只須要在你的HTML網頁當中加入以下範例語法：

 fa-camera-retro

就會產生，是不是很簡單呢？

官網也提供了更多的範例與圖示給各位網頁設計師們方便對照與使用，希望能幫助到大家!

Example >