˄

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

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

 Google Font Meterial Icon Font 網站資訊

網站網址: 按我前往 Google Font Meterial Icon Font

如何在網頁中使用 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 免費圖示?

目前有0則留言
分享您的留言
顯示名稱:

電子郵件:

(不會公佈)

連結網址:

(請輸入完整網址含 https://)

留言內容:

 訂閱本站文章