1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Font Awesome 各別下載SVG檔,並將SVG嵌入到CSS,同時可設定圖示大小與顏色

Font Awesome 各別下載SVG檔,並將SVG嵌入到CSS,同時可設定圖示大小與顏色

2021/08/24

梅問題-Font Awesome 各別下載SVG圖示檔,並且將SVG嵌入到CSS中,同時可設定圖示尺寸與顏色
  Font Awesome 一直是梅干相當常使用的向量圖示之一,且只需將Font Awesome的CSS載入網站後,立即就可從Font Awesome的官網中,尋找適合的圖示,並套用到網站中,甚至還可透過CSS來設定圖示的大小與顏色,相當的方便好用,但隨著Font Awesome不斷的更新,現也變得愈來愈肥。

但載入一大包的圖示檔,卻只用了三、四個圖示,有些浪費使用者的頻寬,且Font Awesome 除了可放置在HTML中外,也可透過偽元素,將它加到元素中,這樣當使用某些標籤時,就會自動出現圖示,但這就得先載入Font Awesome字型檔才能套用,因此今天梅干要來分享個小技巧,透過Font Awesome的官網,各別的下載所需的SVG檔後,再透過CSS偽元素,將svg檔直接引用到網頁的CSS中,除了可改變圖示的大小,甚至還可改變顏色,至於要怎麼來做設定,現在就一塊來看看吧!


Step1
首先進入Font Awesome的網站,並搜尋到所需的圖示,再點上方的下載圖示。
梅問題-Font Awesome 各別下載SVG圖示檔,並且透過CSS偽元素,將SVG嵌入到content中
Step2
下載完畢後,並用文字編輯器將它開啟,再把裡面的碼全部複製起來。
梅問題-Font Awesome 各別下載SVG圖示檔,並且透過CSS偽元素,將SVG嵌入到content中
Step3
接著使用CSS的偽元素,在div之後加入一個元素,並在content中使用url('data:image/svg+xml,SVG')
梅問題-Font Awesome 各別下載SVG圖示檔,並且透過CSS偽元素,將SVG嵌入到content中
Step4
把剛剛的SVG碼都貼上後,接著在後面,設定此元素的顯示方式,以及顯示的尺寸,而這顯示尺寸就可控製圖示的大小。
梅問題-Font Awesome 各別下載SVG圖示檔,並且透過CSS偽元素,將SVG嵌入到content中
Step5
當要改變顏色時,找到svg裡面fill屬性,並透過rgb就可設定圖示的顏色啦!因此除了不用載入一大包以外,甚至在使用偽元素時,也不用再去尋找相對的文字名稱啦!
梅問題-Font Awesome 各別下載SVG圖示檔,並且透過CSS偽元素,將SVG嵌入到content中