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的網站，並搜尋到所需的圖示，再點上方的下載圖示。

---

Step2
下載完畢後，並用文字編輯器將它開啟，再把裡面的碼全部複製起來。

---

Step3
接著使用CSS的偽元素，在div之後加入一個元素，並在content中使用url('data:image/svg+xml,SVG') 。

---

Step4
把剛剛的SVG碼都貼上後，接著在後面，設定此元素的顯示方式，以及顯示的尺寸，而這顯示尺寸就可控製圖示的大小。

---

Step5
當要改變顏色時，找到svg裡面fill屬性，並透過rgb就可設定圖示的顏色啦！因此除了不用載入一大包以外，甚至在使用偽元素時，也不用再去尋找相對的文字名稱啦！