Material Icons > Material Icons Guide
1 需先 Material Icons Guide 中找到該 icon 的 CDN
<link href="<https://fonts.googleapis.com/icon?family=Material+Icons>" rel="stylesheet">
2 點擊想要載入的 icon 即可從右欄找到程式碼
載入上述 CDN 會發現需移除 outlined 的部分,才能正確載入 icon ,可使用下列 CDN 便能載入各個樣式,像是:outline、filled、rounded、sharp、two tone(不須移除 outline)。
<link href="<https://fonts.googleapis.com/css?family=Material+Icons%7CMaterial+Icons+Outlined%7CMaterial+Icons+Two+Tone%7CMaterial+Icons+Round%7CMaterial+Icons+Sharp>" rel="stylesheet">
選擇想要使用的 Icon
點選 icon,出現右側欄
將 Static icon font 區塊中 <link>
程式碼貼至 <head>
內 >可載入以下 CDN (此 CDN 為樣式 outline ,欲載入其他樣式需至該 icon 取得 CDN )
<link rel="stylesheet" href="<https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0>" />
將 Inserting the icon 區塊中程式碼貼至 HTML 區塊內 Material Symbols 載入範例
Material Symbols 與 Material Icons 相同為 Google 提供的 Icon 服務, 差異為 * Material Icons 無法透過官方設定做相關 Icon 的調整。 * Material Symbols 能更有彈性的調整 Icon (可參考此官方文件)。
若需對於不同區塊的 Icon 做調整,可參考此官方提供的 CodePen,使用div進行設定並包裹所需的元素。
IcoFont 是另外一種 icon 圖源,但載入方式相較起來更為複雜,可以跟著步驟嘗試載入。