Icon Font 的使用方式
之前介紹過「Web Font 的使用方式」，這篇則是介紹 Icon Font 的使用，Icon Font 顧名思義就是使用小圖示 ( icon ) 當作字體，只需要打入對應的代碼，或是加上固定名稱的樣式，就能夠產生一個小圖示。這種方式的好處其實不少，因為使用 Icon Font 除了可以減少圖片的使用率，也可以讓 icon 的大小、顏色都能夠像文字一樣隨心所欲的調整，但相對的也是有些壞處，例如一定得使用外部載入字體、icon 只能夠使用單色 ( 因為文字只能單色 )...等。
對於要自己製作 Icon Font 的朋友們可以參考這篇文章：How to make your own icon webfont，我這邊就不多作介紹，因為就算你會自己製作自己的 Icon Font，最後你還是會使用免費的 Web Icon Font，為什麼呢？畢竟 Web Icon Font 是眾多設計師的結晶，而且版權免費公開，在這個資訊爆炸快速的時代，用最省力的方式當然是最好的，加上近年來 Bootstrap 的興起，連帶搭配許多 Icon Font 都是免費且容易被大眾所接受的，我們就不用在花時間，設計出一個還要測試大眾口味的 icon 囉！
現在開始介紹如何使用 Icon Font，首先我們要先知道哪裡有免費的 Icon Font 可以使用，可以參考下列網站：
這幾個網站的使用方式都差不多，第一個步驟一定得載入他們的 css，以 Font Awesome 來說，這是一個有搭配 BootStrap 的 Icon Font 網站，相較於其他網站必須自己輸入對應的 Unicode來說，更為便利使用，因為只需把 icon 放在<i></i>裏頭，要輸入對應的 class，這個<i></i>就會變身成為對應的 icon。 ( 使用方式 )
若使用 Font Awesome ，我們要先載入這個 CSS，你也可以下載下來放在自己的網站空間。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
接下來只要參考網站所列的 icon 列表，輸入對應的class，就能夠產出對應的 icon：
<i class="fa fa-camera-retro"></i> fa-camera-retro
而也可以根據不同的class放大縮小
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
官方網站還列出了更多的樣式，都是單純使用<i></i>搭配class就可以辦到了。( 參考這篇 )
順應扁平化設計的趨勢，CSS3 技術的興起，以及瀏覽器的進步，使用 Icon Font 的方式也越來越普遍，但我認為一個好的網頁設計，也不單純只是靠一個新的技術就夠了，如何讓 Icon Font 和傳統的 Icon 做最完美的搭配，如何讓 Icon Font 和版面有最佳的協調性，才是一個好的網頁設計最重要的精神所在喔！