Typicons 免費下載 336 個完美設計、通用向量圖示集

Typicons 免費下載 336 個完美設計、通用向量圖示集

近期出現非常多的向量圖示集,或者可以說是素材庫,以網頁字型(Webfont)方式載入圖示後再透過 CSS 顯示某個圖案,這麼做的好處是支援各種尺寸螢幕,包括 Retina 顯示器,而且也能夠在最短時間開啟網頁,不用擔心拖慢顯示速度。此外,一套圖示裡有非常多圖形,可以用於使用者介面開發或原生應用程式,如果你正好缺圖,可以來本文介紹的網站找找。

Typicons 是一款開放原始碼、設計線條簡單的免費圖示集,一共有 336 種圖案,使用者只需要從 Github 網站下載特定檔案,再將它載入網站或專案就能使用,其中包含原始的 SVG 格式,使用者也能依照自己需求來建構你自訂的圖示集。

如同於之前介紹過的 OcticonsEvil Icons 和 Entypo,其實在使用上大同小異,如果你不清楚如何使用,Typicons 也提供完整的「How to use Typicons」教學,若你使用 Bower 可以透過一行指令取得這套圖示的相關檔案,其他使用者則可從 Github 獲取所有檔案。

網站名稱:Typicons
網站鏈結:https://typicons.com/

使用教學

STEP 1

開啟 Typicons 網站後,可以看到所有圖示集裡的圖案,目前一共 336 種,其實好像沒有限定那一種類型的操作介面或應用程式才能用,種類還蠻完整的。

Typicons

STEP 2

將滑鼠游標移動到圖示上方,除了會放大顯示,還能從下方得知這個圖示的名稱,這是用來載入顯示某個圖示使用的,稍後我會再提到更詳細的使用方法。

Typicons

STEP 3

點擊 Typicons 網站上方的「Download」按鈕連接到 GitHub,可以取得原始碼檔案,擇一下載即可,最主要的是 /src/font/ 資料夾下的檔案,不知道語法怎麼寫,請參考 demo 網頁檔的原始碼寫法。

Typicons

STEP 4

在「How to use Typicons」也有簡易教學,其實只要放上一段載入 typicons.min.css 樣式表的語法,或者從你現有的 CSS 加入 @font-face 載入 .eot、.woff、.ttf、.svg 等幾個必要檔案就能使用,網站上提供範例寫法,路徑稍微改一下就能使用。

本文前面第二個步驟顯示的圖示名稱其實就是 CSS 樣式,透過 <span> 標記的 class 來載入圖示就能使用,更多設定方法可以參考官方網站的說明文件。

Typicons

分享本文