如何使用 Google Material icons

GITHUB

開啟 Google Material icons 網站後,在首頁的地方就有寫是開源的專案,可以使用在個人或商業專案。接著就點選 Navbar 最右項的 Resources > Icons,就能成功進入挑選 Icon 的頁面。

找到自己想要的圖示後,左下方會顯示 Selected Icon 的按鈕,點開可以選擇下載至本機端使用,或者像我一樣以 Icon Font 字型來帶入圖示。
在自己專案的 head 裡面引入 Material icons 的 link 連結,就能在 HTML 中使用 icons 哩。

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

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

最後來說說 Google Material icons 的優點好了。
首先就是它跟 Font Awesome 一樣是免費的,而且圖案選擇很多,文件也很齊全,容易上手使用。
格式有 SVG、PNG、Icon Font 三種類型,另外使用上也無須署名,可以自由地使用於個人網頁或商業專案中。

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