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

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

    相關文章



     站內搜尋 


    ˄