我介紹過不少免費圖示,但可能都沒有我接下來要推薦的圖示集特別,有時開發者需要在網站裡放上一些技術相關標誌,例如主機商告訴客戶支援那些技術(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 程式碼複製回去自己網站測試一下。
值得一試的三個理由:
- 提供各種技術及開發人員可能會用到的標誌、Logo
- 兩種格式:Icon Font、SVG 複製程式碼即可快速使用
- 免費、開放原始碼,已經內建 CDN 功能