使用 Google 提供的 Material icons 點綴你的網頁

過去網頁需要加上 Icon 時,我都會使用 Font Awesome 這個服務。
不過最近在製作「甜點電商」作業時,使用了 Google 提供的 Material icons。
雖然我也就用了這麼一次,但覺得相當方便,因此打算寫一篇 Blog 記錄一下使用步驟。

Google Material icons 可自由用於個人或商業專案

GITHUB

Material is a design system – backed by open-source code – that helps teams build high-quality digital experiences

使用步驟

STEP 1

開啟 Material icons 網站後,點選黑色 Navbar 最右項的 Resources 選項

GITHUB

接著點選下圖之中紅筆圈選處的 Icons 連結,頁面沒做太大的更動的話應該都沒什麼問題

GITHUB

成功進入挑選 Icon 的頁面

GITHUB

STEP 2

點選自己想要的圖示後,左下方會顯示 Selected Icon 的按鈕,點開後可以選擇下載至本機端使用,或者像我一樣以 Icon Font 字型來帶入圖示。

GITHUB

帶入方法簡單來說就是先在 head 裡面引入 Material icons 的 link 連結,以下就直接佛心提供一波:

1
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

GITHUB

接著就能在 HTML 中使用 icons 囉!
舉個例:

1
<i class="material-icons">alarm</i>

總結

最後就來說說 Google 這款 Material icons 的優點好了:

  1. 有超多免費又精美的圖案
  2. 提供 SVG、PNGs 和 Icon Font 三種類型的格式
  3. 無須署名,可自由使用於個人網頁或商業專案

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。