iconmelon 為網頁設計而生的免費 svg 圖示資料庫

iconmelon 為網頁設計師而生的免費 svg 圖示資料庫

iconmelon 是一個相當好用的 svg 圖示資料庫,svg 圖示是比較新的 HTML5 技術,透過簡單的語法來載入向量圖案,利用 CSS3 來加入樣式,也具備檔案原有的濾鏡效果,優點是在跨瀏覽器時可以得到一致的效果,而且檔案較小,不過僅支援較新的瀏覽器。如果你開發網頁時也需要用到圖示,不妨來 iconmelon 找找,這裡有大量的免費圖示可以免費下載使用。

iconmelon 提供的圖示集包括 80 icons pack、Brainy Icons、Jolly Icons、Hearty Vector Icons、Simple Line Icons,使用者也可以自行上傳,跟一般圖示網站不同的是使用者無須下載成套的圖示檔案,只要點選你需要的圖示,按下網站右上角的 Download 即可打包為單一個 svg 檔,再利用 iconmelon 提供的語法教學即可把圖示嵌入網站。

網站名稱:iconmelon
網站鏈結:https://iconmelon.com/

使用教學

Step 1

開啟 iconmelon 後,從網頁裡點選你需要的圖示,選擇後會出現紅色框框,代表已經選取,網站右上角的下載按鈕會顯示你目前已經選擇了幾個圖示,選完後點選 Download 可以將圖示打包成一個檔案下載。

iconmelon 為網頁設計師而生的免費 svg 圖示資料庫

Step 2

下載後解壓縮,開啟 index.html 會顯示要載入這些圖示你可以使用的標籤名稱,看到這裡可能還是不懂要怎麼使用 svg 圖示,沒關係,點選網頁左上角的「How to Use」,會有詳細的使用說明。

iconmelon 為網頁設計師而生的免費 svg 圖示資料庫

Step 3

依照 iconmelon 提供的說明頁面指示,複製 icons.svg 檔的內容並貼上,或是從 index.html 檔案底部複製 js 程式碼,並指向 icons.svg 檔案路徑即可調用,說明頁面有相當詳細、完整的說明,使用時可以做為參考。

iconmelon 為網頁設計師而生的免費 svg 圖示資料庫

分享本文