1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Google 提供免費 2000組的Icon Font圖示,Material icons 為網頁圖示多了一個生力軍

Google 提供免費 2000組的Icon Font圖示,Material icons 為網頁圖示多了一個生力軍

2021/03/09

梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
  自從Google與Adobe聯手推出了思源字體後,網頁的字型不再只有那101種,同時再搭配不同的粗細變化,讓網頁編排上變得更加的靈活,再加上Google與Adobe雙方都提供無限流的雲端字型服務,供大家使用,因此也不用擔心主機頻寬的問題。

Google除了提供免費的字型外,最近還釋出了近2000組的Icon Font圖示,而平常所會用到的圖示應有盡有,同時免註冊、免下載,直接引用雲端的服務至網頁中,立即就可使用Google所釋出的Icon Font圖示囉!因此身為網設的你,也千萬別錯過了。


Material icon
網站名稱:Material icon 
網站連結:https://material.io/resources/icons/

Step1
在進入Google所提供的免費圖示的平台Meterial icon,先點右邊中間的連結。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step2
進入後,再把引用的連結複製起來。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step3
貼到網頁的<head>~</head>之間。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step4
引用好後,再回到Material Design的平台,搜尋要使用的圖示。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step5
當選擇好後,點一下圖示,再點左下角的灰色按鈕。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step6
接著再把下方的HTML語法複製。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step7
再貼到網頁的<body>~</body>,這時就會看到剛剛所選擇的圖示。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step8
由於是Icon Font,因此是可透過CSS來改變圖示的顏色與大小,但在改變大小時,卻會出現沒反應。
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
Step9
而解決辦法很簡單,只需要在後方加入!important後,立即就會套用上去啦!因此身為網設的你,也趕快來試用看看囉!
梅問題-Google 「Material icons」提供免費 2000組的Icon Font圖示,為網頁圖示多了一個生力軍
#範例展示: