對(duì)font-awesome的理解:
font-awesome和很多其他矢量字體圖標(biāo)一樣,可以用在各響應(yīng)式和移動(dòng)端網(wǎng)站上。它和bootstrap的Glyphicons 字體圖標(biāo)組件性質(zhì)類似艰管,在圖標(biāo)數(shù)量上優(yōu)于Glyphicons字體疆股。
如何導(dǎo)入font-awesome字體到本地工程:
1.在官網(wǎng)首頁(yè)下載font-awesome字體包到本地,官網(wǎng)地址:http://fontawesome.dashgame.com/#basic
2.把下載下來(lái)的字體包解壓,并把文件夾復(fù)制到本地工程根目錄。如圖為文件結(jié)構(gòu)(下載壓縮文件內(nèi)包括壓縮后的css文件和源碼css文件,在工程內(nèi)可使用壓縮處理過(guò)的css文件):
3.在界面內(nèi)引入樣式文件凤价,link內(nèi)文件地址為文件的相對(duì)地址,如圖:
4.使用規(guī)則和代碼:
可以用i標(biāo)簽和span標(biāo)簽引用字體拔创,在html標(biāo)簽語(yǔ)義上利诺,span標(biāo)簽更符合使用語(yǔ)義。使用時(shí)剩燥,先給元素加上“.fa”的基礎(chǔ)字體樣式慢逾,然后加上“.fa-想要使用的圖標(biāo)名稱”。字體可按倍數(shù)縮放灭红,具體規(guī)則請(qǐng)參考官網(wǎng)說(shuō)明侣滩。用戶可自行設(shè)定顏:色大小等屬性,同一般的字體屬性設(shè)置变擒。以使用heart這個(gè)字體圖標(biāo)為例:
基礎(chǔ)引用:<span class="fa fa-heart"></span> 或<i class="fa fa-heart"></i>
放大圖標(biāo):<span class="fa fa-heart fa-lg"></span>(倍數(shù)放大用fa-數(shù)字+x)
設(shè)置屬性:如定義了紅色字體為:font-red君珠,12號(hào)字體大小為f12,則應(yīng)用到此圖標(biāo)上可以寫(xiě)成<span class="fa fa-heart font_red f12"></span>
還有其他問(wèn)題的童鞋大可訪問(wèn):http://fontawesome.dashgame.com/#basic 進(jìn)行更詳細(xì)的學(xué)習(xí)娇斑。