免費資源網路社群:Google 提供免費 Material icons 向量圖示集,可自由用於個人或商業專案(SVG、PNGs、Icon Font) |
Google 提供免費 Material icons 向量圖示集,可自由用於個人或商業專案(SVG、PNGs、Icon Font) Posted: 27 Jun 2015 07:00 PM PDT 之前我曾介紹過「Google 釋出數百個 Material Design 圖示,可免費下載、使用」,也是去年底 Google I/O 大會上發表的專案,後來 Google 將它釋出到 Github 網站上讓使用者下載,直到最近才發現 Google 在自家的 Google Design 網頁裡也已收錄整套的平面化設計圖示 Material icons,如果你正好在開發網頁,或者設計 iOS、Android 應用程式,這套圖示是個可以運用的免費資源。
Material icons 圖示分門別類,有包含 Action、Alert、AV、Communication、Content、Device、Editor、File、Hardware、Image、Maps、Navigation、Notification、Social、Toggle 等主題類型,幾乎所有使用者需要的圖示都能在這裡找到。 這些圖示的主要特色是辨識度極高,無論在何種大小顯示下都能清楚閱讀,此外,網站提供包括 SVG、PNGs 和 Icon Font 三種類型,18dp、24dp、36dp 和 48dp 四種尺寸。 Material icons 圖示集沒有使用限制,也能在產品內重製或再次分享這些素材,如果使用時歡迎在產品 About 頁面標記圖示來源(不是必須),唯一要求是不可轉售這些圖示。 網站名稱:Google Design – Material icons 使用教學STEP 1 開啟 Materials icons 網站後,可從上面看到特色說明,這套圖示集有提供圖示字型(Icon Font),且託管於 Google Web Fonts,如果需要可以參考說明操作。 將網頁往下拉,即可看到 Materials icons 提供的相關圖示,可以發現這些圖示設計都相當簡潔,而且沒有太多複雜變化,重要的是即使在小螢幕(如手機、平板電腦)顯示,也能很清楚看到圖示要傳達的訊息。 STEP 2 點選任意圖示後,下方會顯示該圖示在黑色或白色的呈現情形,右下角則有 SVG、PNGs 和 Icon Font 的下載鏈結(左邊可以切換大小)。 如果你是使用 Icon Font 字型來帶入圖示的話,下方也會有詳細的設定說明,簡單來說,就是先把 Icon Font 內嵌網站,然後以 class 來調用圖示即可。 值得一試的三個理由:
喜歡免費資源網路社群的文章嗎?歡迎追蹤我們的 Facebook、Twitter 和 Google+,或是透過 Email 訂閱更新。 |
You are subscribed to email updates from 免費資源網路社群
To stop receiving these emails, you may unsubscribe now. |
Email delivery powered by Google |
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States |
留言列表