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

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

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

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

Ionicons

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

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

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

使用教學

STEP 1

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

Ionicons

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

Ionicons

STEP 2

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

Ionicons

STEP 3

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

Ionicons

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

Ionicons

STEP 4

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

Ionicons

值得一試的三個理由:

  1. 免費頂級圖示集,收錄超過 700 種圖示圖案
  2. 可直接使用 CDN 網址嵌入使用,無須下載任何檔案
  3. 圖示輕巧,開啟速度快,適用於任何大小的螢幕顯示
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6250