IcoFont 超過 2000 個免費 SVG 圖示字型下載

IcoFont 超過 2000 個免費 SVG 圖示字型下載

IcoFont 收錄超過 2000 個免費圖示圖案,可以為你的創意設計增添趣味,這些圖案都很簡單而且易於辨識,網站將圖示依照不同主題分類為 30 種類別,讓使用者搜尋時可以更快找到自己需要的素材,使找圖的流程更快、更流暢。

IcoFont 提供 SVG 向量圖和圖示字型(Icon Font)兩種格式,可單獨下載個別圖示,也能一次選擇多個類別、圖案將它打包下載。

依照網站說明,IcoFont 圖示可使用於網頁或桌面,集合各種類型的圖示圖案,非常完整且全面的設計,而且 100% 免費!這套圖示是開放原始碼專案,所有圖示採用 CC BY 4.0 授權,字型檔案則使用 SIL OLF 授權,其他從 IcoFont 下載的非字型、非圖示檔案使用 MIT license。

IcoFont
https://icofont.com/

使用教學

STEP 1

開啟 IcoFont 網站點選「View All Icons」開啟圖示檢視器(或點選上方選單的 Icons),主要分為左右兩邊欄位,左側是各種圖示分類和數量,右側則有搜尋功能、圖示預覽和標題。

IcoFont

點選圖示會顯示標記、Hex 和 HTML 字元值參照(HTML Entity)資訊,點選「Download SVG 」下載該圖示的向量圖格式,或是點選「Add to collection」稍後再打包多個圖示下載。

IcoFont

STEP 2

除了單獨將圖示加入收藏夾,也可點選分類右上角「Add to Collection」將整個分類加入收藏稍後下載,或是點選「Download」將整個分類圖示全部下載。

IcoFont

加入收藏夾後點選右上角的「Collection」圖案,會看到所有被加入的圖示,點選下載按鈕就能將所有圖示打包、一次全部下載,對於只需要特定圖示的使用者來說很方便也很有用。

將圖示下載解壓縮會有三個檔案夾:css、example 和 fonts,如果要使用於網頁上,樣式表相關檔案會在 css 目錄,圖示字型則是在 fonts 目錄下,另外網站也提供使用範例,可以從 example 資料夾找到,包括一個 HTML 檔案會顯示你下載的所有圖示圖案。

IcoFont

STEP 3

點選 IcoFont 任意圖示會顯示標記、Hex 和 HTML 字元值參照,如果要在網頁上使用,可以參考 How to use 頁面說明載入一段 CSS 樣式表(在下載的圖示壓縮檔可找到),透過 Markup 進行調用就能在網頁上顯示特定的圖示圖案。

IcoFont

值得一試的三個理由:

  1. IcoFont 收錄超過 2100 個免費圖示,一共有 30 種分類
  2. 提供 SVG 和 Icon Font 兩種格式,可單獨下載或是打包下載
  3. 開放原始碼專案,圖示採用 CC BY 4.0 授權方式釋出
分享本文