搜尋

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] Boootstrap5.0 全新的 IconFont 圖示文字設計,漂亮有設計感且有三種的嵌入方式

[教學] Boootstrap5.0 全新的 IconFont 圖示文字設計,漂亮有設計感且有三種的嵌入方式

2021/05/11

梅問題-[教學] Boootstrap5.0 全新的Iconfont圖示設計,並且有三種的嵌入方式
  Boostrap3.0時就已內建了IconFont圖示文字,且裡面的圖示都是平常設計網頁常會使用的一些指示符號,雖然說圖示相當的齊全,但設計的風格有些生硬,因此梅干個人不是很愛,反倒是比較常用Fontawesome、IcoMoon,也不知是因為使用的人不多,所以在Bootstrap4.0則將IconFonts給拿掉了,直到Bootstap5.0又再度將IconFons給納入。

而Bootstrap5.0新版的圖示,梅干個人覺得還挺漂亮且有設計感,同時此次要使用Boostrap5.0的圖示時,除了像以往整包嵌入網頁外,還新增了SVG檔的下載,或是將SVG格式直接寫入網頁中,讓使用變得更加彈性,接下來梅干就來分享,如何將SVG的格式直接寫入到網頁中,並且設定它的大小與顏色。


Bootstrap5.0 Icons
Step1
在進入Boostrap5.0的圖示頁面後,可以點右上的Donwload鈕,將全部的圖示下載並嵌到網頁中。
梅問題-Boootstrap5.0 全新的Iconfont圖示設計,並且有三種的嵌入方式
Step2
當把頁面向上滾動時,就會看到各式各樣的圖示,可看到新版的圖示,不但變得比較圓滑且有設計感。
梅問題-Boootstrap5.0 全新的Iconfont圖示設計,並且有三種的嵌入方式
Step3
找到喜歡的圖示後,除了可下載SVG檔外,也可像平常的方式嵌入,而這邊梅干要介紹第三種方式,那就是將SVG碼匯入網頁中。
梅問題-Boootstrap5.0 全新的Iconfont圖示設計,並且有三種的嵌入方式
Step4
接著把SVG的格式,貼到網頁中,立即就會顯示該圖示的效果。
梅問題-Boootstrap5.0 全新的Iconfont圖示設計,並且有三種的嵌入方式
Step5
當要調整SVG圖示的大小時,則是使用widthheight,顏色則是color 而不是background喔!用這種方式,最大的好處就是用多少嵌入多少,且也省得載入CSS樣式,直接嵌入到網頁中,而使用此方法無論有無使用Bootstrap都可使用該圖示的,相當的方便喔!
梅問題-Boootstrap5.0 全新的Iconfont圖示設計,並且有三種的嵌入方式


精選文章

友好網站  樂活大方 | 男丁格爾

回應本文