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

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

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

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

Omg-img

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

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

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

使用教學

STEP 1

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

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

Omg-img

STEP 2

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

Omg-img

STEP 3

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

Omg-img

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

Omg-img

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

Omg-img

STEP 4

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

Omg-img

值得一試的三個理由:

  1. 由知名圖示網站 Icons8 提供的免費圖示工具
  2. 以一段網址輕鬆取用各種圖示圖案,無流量限制
  3. 可自訂圖示顏色、大小和樣式,操作簡單快速
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6251