Ionicons – 700 多個開放原始碼免費且高品質的字體圖示

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

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

學習筆記

  1. 取得圖示(Download)
    開啟 Ionicons 字體圖示集網站,點擊「Download」就可取得這套完整圖示。不過如果你是要使用於網站開發或在網頁裡使用,建議直接將 CDN 連結嵌入網站就能載入你要的圖案。
  2. 取得圖示(CDN)
    點擊網站上方的「CDN」或直接拖曳到 Ionicons 網頁最下方,可以找到 MaxCDN 贊助的鏈結,這個鏈結也支援 SSL。如果你覺得這個托管服務不夠快,也可以直接從 GitHub 將完整檔案下載下來上傳到自己的主機空間使用,這兩種方法基本上是相同的。

  3. 使用方式
    要如何在網頁裡調用某個圖示呢?這部份可以參考 Ionicons 說明文件,裡頭會有一些基本使用範例。再回到 Ionicons 網站點擊你要的圖示,就會出現該圖示名稱,將這名稱作為樣式就能載入圖案,例如最簡單的用法<ion-icon name=”logo-facebook”></ion-icon>,照著樣式名稱做修改調整。

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

RelatedPost

推薦閱讀ಠ.ಠ  Dashicons – 在 WordPress 網站使用內建的字體圖示

發表留言