在製作網頁時，都會使用一些小圖示來作裝飾，隨著瀏覽器支援度愈來愈高下，讓以前的小圖示變向量化，同時還可改變圖示的大小、顏色都很方便，再加上目前也有許多免費的向量圖示字型的資源可使用，也大幅降低設計的製作時間，且還可任意的縮放不失真，更方便隨時調整，但在使用這些向量圖示文字時，得將圖示以html的標籤加入後，並指定CSS的樣式才能顯示，雖然說已相當方便使用。
除此之外在設計網頁時，也常會指定特定的html標籤，出現時前方就出現一個小圖示，但這得在背景的屬性中加入圖片，因此這時就無法將ICON Font的樣式指定到CSS的樣式中，就得將ICON Font的文字轉成圖片後，再引用到CSS中，其實不用這麼麻煩，換個方式就能將ICON Font中的向量圖示，直接引用到CSS中，至於要怎麼作，現在就一塊來看看吧!
Step1
這邊以fontawesome為例，首先到fontawesome的圖示清單，就會看到所有圖示的名稱外，在後方還會看到淺灰色的字，並將後方文字複製起來，而這就是該圖示的編號。
![梅問題－ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)]()
Step2
當要使用時，一樣要先將fontawesome的css給連結到網頁中後，接著將剛複製的圖示名稱，貼到content中，並要指定font-family，這需與fontawesome.css裡所設定的名稱相同才可以。
![梅問題－ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)]()
Step3
之後只要是h3的標籤，前方就會自動加入剛所設定的圖示，如此一來是不是超方便的，同時還可改變圖示的大小、位置與顏色。
![梅問題－ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)]()
