如何在網頁中使用 Google Icon Font 免費圖示?

如何在網頁中使用 Google Icon Font 免費圖示?

「圖示」運用得當,絕對勝過用文字描述,以往要在網頁裡使用圖示,可以使用圖檔,但不論是要更改尺寸、顏色都相當麻煩,而現在大多使用 Icon Font,將圖示變成字形來使用,這樣一來不論日後維護要改尺寸大小、顏色就相當方便,「Google Font」內現在就有提供成套風格且免費的 Icon Font 供使用者應用,如果習慣使用圖檔,每個圖示同樣都有提供 PNG、SVG 圖檔格式,不論是應用在網頁、Android 或是 iOS 都不是問題。

§相關文章,還可以參閱:

如何在網頁中使用 Google Icon Font 免費圖示?

1.進入 Google Icon Font 網站後,可以點擊How to implement 內的 [ Developer guide ] 來取得 Material Icon Font 的引用語法及後續使用方法。

如何在網頁中使用 Google Icon Font 免費圖示?

如何在網頁中使用 Google Icon Font 免費圖示?

如何在網頁中使用 Google Icon Font 免費圖示?

2.網頁上的使用語法。

如何在網頁中使用 Google Icon Font 免費圖示?

3.知道引用、CSS 及網頁上要如何使用後,我們就可以回到原網頁透過分類或關鍵字來找尋要使用的 ICON FONT。

如何在網頁中使用 Google Icon Font 免費圖示?

4.點擊要使用的 ICON,右側便會彈出相關語法與下載,使用這可以根據需求取出相關資源。

如何在網頁中使用 Google Icon Font 免費圖示?

5.在網頁編輯器中,我們就可以根據使用指南內的使用方式將引用語法、CSS搬到相關位置。

如何在網頁中使用 Google Icon Font 免費圖示?

6.最後,將 ICON FONT 的使用語法搬到<body></body>內的位置,就完成了。

如何在網頁中使用 Google Icon Font 免費圖示?

如果世上只有自己有電話,估計沒甚麼用處,當電話用戶越來越多時,就能顯現出電話的價值,同理,如果已有 ClubHouse 的帳號,卻不知道哪裡有有自己感興趣的房間可加入,實在也很浪費,ClubSearch 是個可以用關鍵字來搜尋「房間」或用戶名稱的搜尋引擎,可以搜尋過去及未來的活動,如果屬於未來,還可以透過期內建功能加入到「Google 日曆」,以提醒自己。

想要更新 Windows 10 到最新版本,會想要知道位目前所處版本,而當使用[ 開始 ] &gt; [ 設定 ] &gt; [ 系統 ] &gt; [ 關於 ]又只會出現家用版、專業版、企業版、教育版等字樣而已,不知道目前作業系統的版本代號,現在我們可以透過「命令提示字元」輸入 Winver.exe 來查詢。