Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式

我介紹過不少免費圖示，但可能都沒有我接下來要推薦的圖示集特別，有時開發者需要在網站裡放上一些技術相關標誌，例如主機商告訴客戶支援那些技術（Nginx、PHP、MySQL），專案網頁顯示此程式支援那些瀏覽器（Google Chrome、Firefox、Safari），或者你的網站是使用那些技術建置等等，一般作法是會直接放上對應圖示，取代文字說明，不過現在有一套免費圖示集已經把這些可能會用到的圖案一次搞定，只要複製程式碼就能快速套用到你的網站或服務。

本文要推薦的「Devicon」是一款免費圖示集，以收錄程式語言、設計和開發工具為主，常見的技術相關標誌圖案都可在這套圖示中找到。Devicon 提供兩種使用方式：圖示字型或 SVG 向量圖格式，只要從網站上找到你要的圖案，直接將產生的代碼複製、貼上，就能快速取用圖案。

值得一提的是無論是使用字型檔或 SVG，都可透過 CSS 調整大小或顯示方式，讓它能被使用於任何網頁或網路服務。除此之外，字型檔也已經支援 CDN，開發者無須自行托管檔案，節省流量開銷。如果你剛好需要取用這些標誌圖案，Devicon 是個非常方便的選擇。

網站名稱：Devicon
網站鏈結：https://konpa.github.io/devicon/

使用教學

STEP 1

開啟 Devicon 網站（目前版本為 2.0），右側會列出所有圖示集圖案，左側則有「超級」快速設定方法，簡單來說，選擇你要的圖案後，快速設定下方就會顯示出對應的程式碼，將程式碼複製到網站適當位置就能夠顯示。

STEP 2

Devicon 也有提供 WordPress 的標誌，點擊後會發現圖式字型有四種樣式，SVG 版本有三種，看起來顏色不太一樣，有些除了 Logo 外還會加入英文標誌。

STEP 3

我們把畫面再拉近一點，字型版本的圖示使用方式會多一行程式碼，主要是載入字型和 CSS，必須把那段樣式表鏈結放到你的網站 <head></head> 部分；接著再把底下的那段程式碼加入網頁裡要顯示圖示的位置，重新整理頁面就能看到效果。

如果你只想單獨取用一兩個圖示，可能 SVG 版本會更適合你，至少不用載入完整字型檔及 CSS 樣式表，在請求數與流量方面都能夠大幅節省。SVG 形式是直接以程式碼繪製，因此只要三行代碼就能直接在網頁內將圖案繪製出來，非常強大，有興趣的朋友可將產生的 SVG 程式碼複製回去自己網站測試一下。