1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. Google Fonts推出Material Icons圖示字型,可設定圖示線條的粗細變化與風格

Google Fonts推出Material Icons圖示字型,可設定圖示線條的粗細變化與風格

2024/02/27

梅問題-Google Fonts推出Material Icons圖示字型,不但可設定圖示的粗細與風格
  當在網頁中要使用圖示時,最常使用的就是Font Awesome,除了圖示資源豐富外,再來就是可免費使用,但在6.0版後,就有付費版與免費版,二者的差別就在於,付費版的圖示線條較細緻,同時變化性也較多,但現在Google也推出圖示字型,不但可自行設定圖示的粗細外,甚至還可改變圖示的風格,像是填滿、圓角邊,更特別的是,Google Fonts的圖示,在設定上竟然不是用樣式名稱,而是直接將圖示名稱,寫在HTML的標籤中,至於要怎用,現在就一塊來看看吧!


Google Fonts圖示字型


Step1
在進入Google圖示字型後可從Weight中,透過拖拉改變圖示的粗細變化,共有7種粗細變化。
梅問題-
Step2
預設為線框,若要實心的話,只需將fill的選項設為開啟。
梅問題-
Step3
在選擇圖示後,分別將右邊的原始碼貼到網頁中。
梅問題-
Step4
在貼入後,隨即就會顯示剛所選擇的圖示,而比較特別的是,Google的圖示字型,則是透過標籤中的文字進行設定的。
梅問題-
Step5
當把裡面的文字替換掉後,隨即就可更換其它的字型,真的相當的酷!且裡面的圖示應有盡有,因此下回要使用網頁圖示時,不妨可試試看囉!
梅問題-