最近有機會開始使用 google fonts 字型檔圖示：Material Sybmols，這類的工具網頁上呈現的不錯，
也支援行動裝置，使用上有一些小細節需要注意，紀錄一下...
一開始使用進入網頁會有點不知所措開如何使用，透過以下網址進入
https://fonts.google.com/icons
概略介紹一下各區塊
最左邊為功能清單，目前是 Icons
功能清單的右手邊為客製化項目設定，其中有Fill、Weight、Grade、Optical Size，可實際拖拉把玩
右手邊的圖示清單會立即更新相關預設值為 Wight 400、Optical 48、Grade 0、Fill 0，亦可點最上
方 reset all 恢復預設值
網頁上方有個搜尋列，可快速尋找符合的Icons
來看看如何引用，先點擊一個你要的Icon，如 Search
此時右邊會出現相關資訊欄
先來看一下直接使用，如下圖
下方兩個下載的按鈕(svg、png)，代表可下載兩種格式的圖片，亦可調整右方的 size 及 color 再下載
另外，有個複製按鈕可方便直接用在網頁中
點選複製後可貼到相關文件觀察，這是一個 svg 的網頁標籤
先提一下，若要使用裝置可直接點選觀察
回到 Web 應用，可以在網頁先 link 以下內容
然後加入網頁元素
網頁呈現
圖示的 Style 一共有三種，分別為 Outlined、Rounded、Sharp
而每一版的樣式設定方式為
?family=Material+Symbols+{Style}...
html class 設定也是加入 style 參數即可 outlined 、rounded、sharp
其中 md-48 為 font-size ，圖片會依據設定變化
值得一提的是 Material Symbols 的上一版本是 Material Icons ，只是官方建議停用，就不介紹
回到 style 本身，若此時希望支援填滿樣式，可以如何設定？
開啟 fill ，再點選任一圖示
右方有個靜態引用的選項，貼上網頁引用即可有效果，可觀察 fill 參數值為 1
若想針對單一 icon 設定，同樣的網站右方也有提供
接下來針對該 icon 設定
最後若要將邊框換為「白色」直接在 html 設定 color 即可
參考
沒有留言:
張貼留言