1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 《Google Material icons》免費向量圖示下載與網站應用

《Google Material icons》免費向量圖示下載與網站應用

2015/07/09

梅問題-《Google Material icons》免費向量圖示下載與網站應用

  梅干最常使用Bootstrap雖然也有提供許多的圖示可使用,但總覺得裡面的圖示有點太尖銳,所以梅干都會引用其它的圖示,像是大家所熟知的Font Awesome,裡面也提供了各式各樣網站所會使用到的圖示,供大家下載使用,同時還是向量檔,因此完全不用擔心失真的問題,除了Font Awesome外梅干也相當喜歡另一套的RWD Framework Semantic,裡面的圖示就相當的平滑,而現在除了Font Awesome、Semantic外,現在Google也推出各式的圖示,供大家免費的使用,除了有提供SVG、PNG單檔的下載外,也可直接引用到網站中,而Google Material icons 圖示有各種的分類,像是Action、Alert、AV、Communication、Content、Device、Editor、File….等,可說是應有盡有,因此身為網頁設計的朋友Google Material icons千萬別錯過了。


Material icons:

網站名稱:Google Design – Material icons
網站連結:https://www.google.com/design/icons/

Step1

進入網站後,向下拉就可看到各式各樣的圖示,裡面的圖示還蠻合梅干的味口。

梅問題-《Google Material icons》免費向量圖示下載與網站應用


Step2

也可直接透過上方的搜尋列,直接輸入關鍵字,但限用英文喔!

梅問題-《Google Material icons》免費向量圖示下載與網站應用


Step3

找到所要的圖示後,除了可將它下載回來外,也可將它嵌入自己的網站中。

梅問題-《Google Material icons》免費向量圖示下載與網站應用


Step4

當下載回來,解壓分別會看到有三個資料夾,除了可給智慧型手機用外,也可給網站來使用。

梅問題-《Google Material icons》免費向量圖示下載與網站應用


Step5

當要引用到網頁也相當的簡單的,只要將它link到網頁中,並且加入所要的圖示類別名稱,這樣就完成囉!

梅問題-《Google Material icons》免費向量圖示下載與網站應用


Step6

預覽網頁時,立即就可看到此圖示啦!同時還可自行的變換此圖示的大小、顏色喔!由於是向量檔,因此完全不用擔心圖示會失真的問題發生。

梅問題-《Google Material icons》免費向量圖示下載與網站應用