WEB課堂隨筆—iconfont圖標(biāo)的使用

iconfont是什么锣险?在還沒學(xué)iconfont的時(shí)候我也一直以為一些樣式的圖標(biāo)列表都是插入的圖片或者插入的背景圖泣崩。學(xué)過iconfont之后仿佛打開了新世界的大門~

1.什么是iconfont

首先先來解釋下什么是iconfont崇摄,我的理解就是用字體代替圖片來展示圖標(biāo)或者特殊字體的方法涨薪。比如我們經(jīng)常在淘寶上看到的


image.png

在新浪微博貼吧類似網(wǎng)站可以看到


image.png

特別在手機(jī)端這種方法用的更多了。
剛開始我在做這些效果時(shí)都是用image-background來做這些效果袋哼。還要考慮到圖片的大小問題冀墨,總之很麻煩。

2.iconfont優(yōu)缺點(diǎn)

之前也說了如果按照常規(guī)方式來插入背景圖的話要考慮到圖片本身大小的問題先嬉,當(dāng)元素大時(shí)圖片就會(huì)失真變得很模糊轧苫。并且一張張圖片占用內(nèi)存,在調(diào)用的時(shí)候還要一張一張的找疫蔓。所以iconfont可以總結(jié)一下兩個(gè)優(yōu)點(diǎn)含懊。
1.首先它的體積要比圖片小的多。
2.不僅體積小衅胀,而且還具有更好的可維護(hù)性(因?yàn)槭鞘噶坎砬牵岳觳蛔冃危活伾梢宰孕懈鼡Q滚躯,支持一些CSS3對(duì)文字的效果)

3.怎么使用iconfont

1.登陸阿里巴巴矢量圖標(biāo)庫(kù)http://www.iconfont.cn/(矢量圖標(biāo)庫(kù)有很多雏门,這里用阿里巴巴圖標(biāo)庫(kù)來演示)
2.登陸過后就可以看到首頁(yè)有很多網(wǎng)友自己制作的彩色素材。這里不建議用彩色的素材因?yàn)橛行g覽器不太兼容掸掏。
3.選擇需要用到的素材后點(diǎn)擊購(gòu)物車按鈕(如果只保存一個(gè)素材的話可以直接點(diǎn)擊下載)

image.png

4.選擇好后在左上角購(gòu)物車?yán)镞x擇下載代碼茁影。
image.png

5.把下載下來的解壓出來是一個(gè)iconfont的文件夾,把它放在自己的站點(diǎn)下面丧凤。(iconfont文件夾里面有這些文件)
image.png

6.在我們自己的樣式文件里引用上圖的iconfont.css文件

<link href="iconfont/iconfont.css" rel="stylesheet" type="text/css">

打開這個(gè)文件我們會(huì)在里面發(fā)現(xiàn)這樣一個(gè)類


image.png

這個(gè)類就是用來控制iconfont的大小樣式的募闲,我們不去管它。
7.打開iconfont文件夾下面的demo_unicode.html文件會(huì)發(fā)現(xiàn)你所保存的圖標(biāo)愿待,在圖標(biāo)下面會(huì)有一串字符它就相當(dāng)于這個(gè)素材的編號(hào)浩螺。


image.png

8.最后把編號(hào)填入到自己用到的地方就可以了(不要忘了要引用iconfont這個(gè)類和后面的分號(hào)也不要忘記)
image.png

還可以在自己的樣式里面在自己給這個(gè)類覆蓋樣式一些字體的樣式也可以在它上面使用,比如字體顏色仍侥,字體大小之類的要出。最終效果如下圖所示:


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市农渊,隨后出現(xiàn)的幾起案子患蹂,更是在濱河造成了極大的恐慌,老刑警劉巖砸紊,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件况脆,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡批糟,警方通過查閱死者的電腦和手機(jī)格了,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來徽鼎,“玉大人盛末,你說我怎么就攤上這事》裼伲” “怎么了悄但?”我有些...
    開封第一講書人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)石抡。 經(jīng)常有香客問我檐嚣,道長(zhǎng),這世上最難降的妖魔是什么啰扛? 我笑而不...
    開封第一講書人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任嚎京,我火速辦了婚禮嗡贺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘鞍帝。我一直安慰自己诫睬,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開白布帕涌。 她就那樣靜靜地躺著摄凡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蚓曼。 梳的紋絲不亂的頭發(fā)上亲澡,一...
    開封第一講書人閱讀 51,688評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音纫版,去河邊找鬼床绪。 笑死,一個(gè)胖子當(dāng)著我的面吹牛捎琐,可吹牛的內(nèi)容都是我干的会涎。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼瑞凑,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼末秃!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起籽御,我...
    開封第一講書人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤练慕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后技掏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體铃将,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年哑梳,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了劲阎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鸠真,死狀恐怖悯仙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吠卷,我是刑警寧澤锡垄,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站祭隔,受9級(jí)特大地震影響货岭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一千贯、第九天 我趴在偏房一處隱蔽的房頂上張望屯仗。 院中可真熱鬧,春花似錦丈牢、人聲如沸祭钉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至距境,卻和暖如春申尼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背垫桂。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來泰國(guó)打工师幕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人诬滩。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓霹粥,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親疼鸟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子后控,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,167評(píng)論 25 707
  • 一.iconfont使用場(chǎng)景(優(yōu)缺點(diǎn)); 一般我們項(xiàng)目決定要使用一個(gè)技術(shù)點(diǎn)前空镜,會(huì)查相關(guān)資料對(duì)其有大概的理解浩淘。例如,...
    蕭強(qiáng)閱讀 1,606評(píng)論 1 6
  • 什么是Iconfont 我們通澄庠埽看到的圖標(biāo)都是以圖片形式集成到項(xiàng)目中使用张抄,而 Iconfont 是一套字體圖標(biāo),和...
    十秒_閱讀 3,351評(píng)論 1 14
  • 你覺得今天的自己幸運(yùn)嗎洼怔? 今天的我覺得自己非常幸運(yùn)署惯,而且,昨天的我覺得自己也非常幸運(yùn)镣隶,前天的我也覺得自己非常幸運(yùn)…...
    云小羊閱讀 305評(píng)論 0 3
  • 在心為志极谊,發(fā)言為詩(shī) 《文心雕龍》 詩(shī)者,心之言也矾缓,情未至?xí)r雖借他物...
    庸曉閱讀 310評(píng)論 0 1