Ionicons：700 個開放原始碼高品質圖示字型免費下載

WordPress 從 3.8 開始加入官方圖示集「Dashicons」，將前台及控制台可能會用到的圖案一致化，當然也能透過 WordPress 本身的 CDN 讓圖示載入速度更快，本來打算將原有網站佈景主題需要用到的圖案也替換成 Dashicons，無奈缺少一些圖示（Dashicons 不打算加入更多社交網路按鈕），Google 的 Material design icons 也是礙於商標使用問題而無法放入其他社群圖示，幾經考慮後只好轉向尋找其他更合適選項，於是促成這篇文章的出現。

本文要推薦的「Ionicons」是一款收錄 700 多個高品質圖案的免費圖示集，它是為「Ionic Framework」開發框架設計的圖示字型（Icon font），由 @benjsperry 設計，100% 免費且開放原始碼是它的特色。

Ionicons 目前已經有超過 700 種圖示圖案，除了使用者介面開發會用到的按鈕圖示外，它也收錄幾個常見的社群網站圖示，例如：Facebook、Twitter 和 Google+ ，對於想加入社群按鈕來說就很方便，不用再額外載入其他圖示拖慢網頁開啟速度。

另一方面，Ionicons 也和 MaxCDN（現已被 StackPath 收購）合作提供免費 CDN 網址，各個地區的使用者在取用圖示庫時速度就會更快、更順暢，當然也不會消耗自己的網站流量。

網站名稱：Ionicons
網站鏈結：https://ionicons.com/

使用教學

STEP 1

開啟 Ionicons 圖示集網站，點擊「Download」就可取得這套完整圖示。不過如果你是要使用於網站開發或在網頁裡使用，建議直接將 CDN 鏈結嵌入網站就能載入你要的圖案（稍後說明）。

一般來說，我在決定要使用這套圖示集以前，會先輸入幾個關鍵字來查詢我需要的圖案有沒有被收錄，或者圖案設計上是不是符合我的網站風格。Ionicons 圖示設計都比較精簡一些，看起來很簡潔，對於大部分設計來說應該都很適合。

STEP 2

點擊網站上方的「CDN」或直接拖曳到 Ionicons 網頁最下方，可以找到 MaxCDN 贊助的鏈結，這個鏈結也支援 SSL。如果你覺得這個托管服務不夠快，也可以直接從 GitHub 將完整檔案下載下來上傳到自己的主機空間使用，兩種方法基本上是相同的。

STEP 3

要如何在網頁裡調用某個圖示呢？這部份可以參考 Ionicons 說明文件，裡頭會有一些基本使用範例。

再回到 Ionicons 網站點擊你要的圖示，就會出現該圖示名稱，將這名稱作為樣式就能載入圖案，例如最簡單的用法：<i class="icon ion-social-facebook"></i>，照著樣式名稱做修改調整。

STEP 4

最後，我再推薦一下 Ionicons 提供的「Cheatsheet」也就是小抄頁面，非常好用！這個頁面裡會有每個圖示在不同大小的顯示樣式預覽，以及樣式名稱（Classname）、HTML 和 CSS Content，對於開發者來說應該會用到。