
Google除了提供免費的字型外,最近還釋出了近2000組的Icon Font圖示,而平常所會用到的圖示應有盡有,同時免註冊、免下載,直接引用雲端的服務至網頁中,立即就可使用Google所釋出的Icon Font圖示囉!因此身為網設的你,也千萬別錯過了。
Material icon
網站名稱:Material icon
網站連結:https://material.io/resources/icons/
網站連結:https://material.io/resources/icons/
Step1
在進入Google所提供的免費圖示的平台Meterial icon,先點右邊中間的連結。

Step2
進入後,再把引用的連結複製起來。

Step3
貼到網頁的<head>~</head>之間。

Step4
引用好後,再回到Material Design的平台,搜尋要使用的圖示。

Step5
當選擇好後,點一下圖示,再點左下角的灰色按鈕。

Step6
接著再把下方的HTML語法複製。

Step7
再貼到網頁的<body>~</body>,這時就會看到剛剛所選擇的圖示。

Step8
由於是Icon Font,因此是可透過CSS來改變圖示的顏色與大小,但在改變大小時,卻會出現沒反應。

Step9
而解決辦法很簡單,只需要在後方加入!important後,立即就會套用上去啦!因此身為網設的你,也趕快來試用看看囉!

#範例展示: