編者按：本文推薦兩個(gè)免費(fèi)可商用的圖標(biāo)素材網(wǎng)站，兩個(gè)都提供了一致性風(fēng)格很高的線性圖標(biāo)集，超過500個(gè)全都可商用，趕緊來收~

本文要推薦的「Feather Icons」是一款免費(fèi)、開放原始碼矢量圖標(biāo)集，收錄八大類型、總共 233 個(gè)圖示，這些圖示設(shè)計(jì)在 24×24 網(wǎng)格上，無論在功能、一致性或簡約設(shè)計(jì)都具有相同特性。圖標(biāo)本身設(shè)計(jì)是由簡單線條構(gòu)成，宛如「羽毛」般輕巧，因此很適合使用于任何的開發(fā)項(xiàng)目。

如果你只單獨(dú)需要其中幾個(gè)圖案，只要點(diǎn)擊圖示就能下載 SVG 矢量格式，調(diào)整成任何你想使用的大小，F(xiàn)eather Icons 亦提供所有圖示打包、快速下載。除此之外，F(xiàn)eather 是開放原始碼項(xiàng)目，可以在 GitHub 找到更多說明。

Feather Icon

STEP 1

開啟 Feather 網(wǎng)站后可以看到所有收錄在這套圖標(biāo)集的預(yù)覽。

一共有八種圖示類型，總數(shù)量超過 200 個(gè)！點(diǎn)擊任何圖案即可下載單獨(dú)的 SVG 格式。透過你手邊的矢量圖編輯工具來編輯、調(diào)整成你需要的大小或格式。

STEP 2

如果想一次打包、下載所有圖案，可點(diǎn)擊網(wǎng)站上方的「Download」取得壓縮檔，解壓縮后就能獲取所有圖標(biāo)的?SVG 格式！圖標(biāo)也會(huì)依照類別放在不同的分類目錄下。

Typicons

Typicons?是一款開放原始碼、設(shè)計(jì)線條簡單的免費(fèi)圖標(biāo)集，一共有 336 種圖案，使用者只需要從 Github 網(wǎng)站下載特定檔案，再將它載入網(wǎng)站或項(xiàng)目就能使用，其中包含原始的 SVG 格式，使用者也能依照自己需求來建構(gòu)你自訂的圖示集。

STEP 1

開啟 Typicons 網(wǎng)站后，可以看到所有圖標(biāo)集里的圖案，目前一共 336 種，其實(shí)好像沒有限定哪一種類型的操作界面或應(yīng)用程序才能用，種類還蠻完整的。

STEP 2

將鼠標(biāo)游標(biāo)移動(dòng)到圖標(biāo)上方，除了會(huì)放大顯示，還能從下方得知這個(gè)圖示的名稱，這是用來載入顯示某個(gè)圖標(biāo)使用的，稍后我會(huì)再提到更詳細(xì)的使用方法。

STEP 3

點(diǎn)擊 Typicons 網(wǎng)站上方的「Download」按鈕連接到 GitHub，可以取得原始碼檔案，最主要的是 /src/font/ 資料夾下的檔案，不知道語法怎么寫，請(qǐng)參考 demo 網(wǎng)頁檔的原始碼寫法。

STEP 4

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

本文前面第二個(gè)步驟顯示的圖示名稱其實(shí)就是 CSS 樣式，透過 <span> 標(biāo)記的 class 來載入圖示就能使用，更多設(shè)定方法可以參考官方網(wǎng)站的說明文件。

「圖標(biāo)素材網(wǎng)站」

1. 《酷站兩連發(fā)！收錄高達(dá)130萬免費(fèi)圖標(biāo)素材的兩個(gè)網(wǎng)站》
2. 《酷站兩連發(fā)！免費(fèi)打包40,000個(gè)圖標(biāo)+日本圖標(biāo)素材站》
3. 《酷站兩連發(fā)！專門提供免費(fèi)簡約圖標(biāo)素材的兩個(gè)網(wǎng)站》

原文地址：free.com.tw

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com