Omg-img 用一段程式碼快速插入免費圖示，可自訂顏色、大小和樣式

相信大家對於之前介紹過的「Icons8 免費圖示 iOS、Windows、Android 扁平化風格打包下載」還有印象，簡單來說 Icons8 是一個收錄大量免費圖示的網站，除了直接從網站下載圖片檔的傳統用法，還提供免費的 CDN 網址能直接取用、將圖示放入自己的網站或開發專案，這項功能可加速圖示載入速度，節省網站流量，同時讓圖示運用變得更省事，最近才發現原來 Icons8 還提供另一個很方便的免費圖示小工具。

本文要介紹的「Omg-img」來自 Icons8，用途很簡單，使用者以一段程式碼（網址）就能快速載入特定主題、顏色、大小和風格的圖示，這項服務類似於 Unsplash It、Placekitten 和 Placemat 用法，都是直接以網址來載入特定大小的佔位圖片，對於開發來說很快、很省時間，不用為了範例圖片必須開啟繪圖軟體編輯。

讀者朋友一定很好奇 Omg-img 可以做到什麼程度呢？透過網址來載入特定圖示圖案是最基本的，還能從網址列來控制顏色、樣式及尺寸大小，幾乎可以說一段網址就能快速載入圖示，非常強大！同時還附帶基本的控制選項，以開發角度來說應該會很有幫助。

根據 Omg-img 網站說法，這個點子是受另一專案「microicon」啟發，而在圖示加速、快取部分由 KeyCDN 公司提供服務，圖片皆以 ImageOptim API 壓縮及最佳化處理。在載入圖示時會從最熱門圖示中撈出使用者指定的圖案，若沒有設定大小則以預設的 50px 顯示。

網站名稱：Omg-img
網站鏈結：http://img.icons8.com/

使用教學

STEP 1

Omg-img 詳細使用方法以一張圖就可說明，圖片請直接訪問：https://png.icons8.com/? ，這裡有幾個重點：

• 載入圖示的網址是 https://png.icons8.com/ 。
• 後方除了名稱是必填值，樣式、大小尺寸和顏色都可不填。
• 圖示名稱就是直接輸入英文單字詞，如兩個字要分隔請用 – 或 _ 。

STEP 2

Omg-img 網站「Usage」提供最基本用法，如果你要插入一個「搜尋」圖示，可直接在網址後面加上 search，當然提到搜尋一般人會直覺聯想到放大鏡，刪除的話可能是垃圾桶之類的。

STEP 3

既然有圖示，就會有變更配色的需求，要如何調整插入的圖示顏色呢？直接在名稱後面加上色碼即可，不過如果是本來就有顏色的彩色圖示就無法變更色彩。

如果你覺得 Omg-img 要逐一設定圖示顏色很麻煩，可透過「Style」加入直接載入樣式，只要將網址列的「color」部分改成其他樣式，例如有 ios、win、material、android、office 等等選項，其實就是從另一套圖示集來獲取顯示圖案。

最後一個部分是大小尺寸調整，一樣在網址後面接上數字，Omg-img 就會遠端處理，給出正確大小的圖案，最大可達 512 ，不過每個樣式的圖示都有自己最佳的設計大小，可以從網站裡看看這些圖示集最適合的顯示尺寸為何，或指定為建議大小的倍數。

STEP 4

最後，還是要再次提醒一下，Omg-img 詳細使用說明已經在 https://png.icons8.com/? 網址中，不知道如何使用的話可直接看圖比較快，若你使用到 Omg-img 或 Icons8 的圖示，記得在網站裡放上鏈結（https://icons8.com/license）。