font-Awesome使用指南

對(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

font-awesome下載地址

2.把下載下來(lái)的字體包解壓,并把文件夾復(fù)制到本地工程根目錄。如圖為文件結(jié)構(gòu)(下載壓縮文件內(nèi)包括壓縮后的css文件和源碼css文件,在工程內(nèi)可使用壓縮處理過(guò)的css文件):

font-awesome文件結(jié)構(gòu)


3.在界面內(nèi)引入樣式文件凤价,link內(nèi)文件地址為文件的相對(duì)地址,如圖:

font-awesome樣式文件引用

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í)娇斑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末策添,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子毫缆,更是在濱河造成了極大的恐慌舰攒,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悔醋,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡兽叮,警方通過(guò)查閱死者的電腦和手機(jī)芬骄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)猾愿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人账阻,你說(shuō)我怎么就攤上這事蒂秘。” “怎么了淘太?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵姻僧,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我蒲牧,道長(zhǎng)撇贺,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任冰抢,我火速辦了婚禮松嘶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挎扰。我一直安慰自己翠订,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布遵倦。 她就那樣靜靜地躺著尽超,像睡著了一般。 火紅的嫁衣襯著肌膚如雪梧躺。 梳的紋絲不亂的頭發(fā)上似谁,一...
    開(kāi)封第一講書(shū)人閱讀 52,262評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音燥狰,去河邊找鬼棘脐。 笑死,一個(gè)胖子當(dāng)著我的面吹牛龙致,可吹牛的內(nèi)容都是我干的蛀缝。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼目代,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼屈梁!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起榛了,我...
    開(kāi)封第一講書(shū)人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤在讶,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后霜大,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體构哺,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了曙强。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片残拐。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖碟嘴,靈堂內(nèi)的尸體忽然破棺而出溪食,到底是詐尸還是另有隱情,我是刑警寧澤娜扇,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布错沃,位于F島的核電站,受9級(jí)特大地震影響雀瓢,放射性物質(zhì)發(fā)生泄漏枢析。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一致燥、第九天 我趴在偏房一處隱蔽的房頂上張望登疗。 院中可真熱鬧,春花似錦嫌蚤、人聲如沸辐益。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)智政。三九已至,卻和暖如春箱蝠,著一層夾襖步出監(jiān)牢的瞬間续捂,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工宦搬, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留牙瓢,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓间校,卻偏偏與公主長(zhǎng)得像矾克,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子憔足,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容