CSS, CSS3, 網頁設計

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

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