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

梅問題-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為例)

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    肉肉 說道:

    梅干大,這些ICON會不會有侵權或是有其他方面的問題一律,因為我怕使用下去之後會有這些問題,求解~~~~~

    回應:
    這是免費開放的服務,因此不會有問題的