摘要:下載并使用登錄,在我的項(xiàng)目中,共有三種形式,這里我一般選擇然后點(diǎn)擊下載至本地,會(huì)得到這樣一個(gè)文件夾。
Iconfont是阿里巴巴矢量圖標(biāo)庫(kù),本文將簡(jiǎn)單介紹如何快速上手使用Iconfont,自從用上Iconfont后,圖片再也不糊了起因
之前,項(xiàng)目中的logo等圖片資源都是UI小姐姐設(shè)計(jì)好后切給我,然后我將其引入項(xiàng)目中,如下形式:
但這種方式有一個(gè)弊端,就是圖片放大后,或者在高分辨率的顯示器下面會(huì)變得模糊,導(dǎo)致不夠清晰,對(duì)于一個(gè)有高要求高標(biāo)準(zhǔn)的場(chǎng)景而言,顯然是不夠的,于是團(tuán)隊(duì)討論,決定用上Iconfont,這是一種矢量圖片庫(kù),由UI小姐姐將圖片傳到阿里Iconfont網(wǎng)站,然后前端下載并引入即可,非常方便。
下載并使用登錄Iconfont,在我的項(xiàng)目中,共有三種形式,這里我一般選擇Font class, 然后點(diǎn)擊下載至本地,會(huì)得到這樣一個(gè)文件夾。
將下圖中五項(xiàng)copy出來,新建一個(gè)myfont文件夾(自定義命名,隨便你)
然后,在你的html頁(yè)面中引入進(jìn)來
最后,在需要的地方使用即可
延伸
Iconfont網(wǎng)站上有很多開源的庫(kù),別人已經(jīng)設(shè)計(jì)好了,如果公司沒有UI設(shè)計(jì)師,你也可以選擇一套自己進(jìn)行組裝,非常自由,當(dāng)然,矢量庫(kù)還有,F(xiàn)ont Awesome 等,也非常不錯(cuò),用法嘛,都是大同小異。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/114281.html
摘要:下載并使用登錄,在我的項(xiàng)目中,共有三種形式,這里我一般選擇然后點(diǎn)擊下載至本地,會(huì)得到這樣一個(gè)文件夾。 Iconfont是阿里巴巴矢量圖標(biāo)庫(kù),本文將簡(jiǎn)單介紹如何快速上手使用Iconfont,自從用上Iconfont后,圖片再也不糊了 起因 之前,項(xiàng)目中的logo等圖片資源都是UI小姐姐設(shè)計(jì)好后切給我,然后我將其引入項(xiàng)目中,如下形式: 但這種方式有一個(gè)弊端,就是圖片放大后,或者在高分辨率...
摘要:之前用的技術(shù)棧都是上找的的腳手架,第一次看項(xiàng)目的源碼。感覺一個(gè)文件里包含模板對(duì)應(yīng)和樣式的組合方式,使得組件化更加明顯,也降低了平時(shí)項(xiàng)目中的小文件數(shù)量。相比于的,使用在原生標(biāo)簽里插入屬性和一些模板表達(dá)式來展示數(shù)據(jù),顯得簡(jiǎn)潔了許多。 之前用的技術(shù)棧都是yeoman上找的webpack+react的腳手架,第一次看vue項(xiàng)目的源碼。感覺一個(gè)vue文件里包含html模板、對(duì)應(yīng)JS和樣式的組合方...
摘要:與使用方式相比,具有如下特點(diǎn)兼容性良好,支持,及所有現(xiàn)代瀏覽器。相比于語(yǔ)意明確,書寫更直觀。不過因?yàn)楸举|(zhì)上還是使用的字體,所以多色圖標(biāo)還是不支持的。一、準(zhǔn)備階段: a.進(jìn)入阿里巴巴矢量圖標(biāo)庫(kù)www.iconfont.cn挑選所需的圖標(biāo),加入購(gòu)物車 b.點(diǎn)擊網(wǎng)頁(yè)中的購(gòu)物車下載代碼 二、3種方法實(shí)現(xiàn) Iconfont 的HTML顯示 Unicode 引用 Unicode...
摘要:方式和方式是極其相似的,只不過他們一個(gè)用的是圖標(biāo)的字體編碼,一個(gè)用的是圖標(biāo)的引用而已是使用了引用的類名,可在下載的中查看,或者可以在阿里矢量圖標(biāo)庫(kù)的網(wǎng)站上,進(jìn)入我的項(xiàng)目查看。 字體圖標(biāo)iconfont阿里官網(wǎng)傳送門: http://www.iconfont.cn/打開首頁(yè)的小圖標(biāo)好漂亮哦1)showImg(https://segmentfault.com/img/bVbghOc?w=1...
摘要:字體圖標(biāo)的不足既然字體圖標(biāo)那么有效率,那么為什么不都使用字體圖標(biāo)呢現(xiàn)在的限制主要是字體圖標(biāo)的開發(fā)要求比較高,畢竟是開發(fā)一種字體。自己開發(fā)字體圖標(biāo)很累,幸好有很多樂于分享的,現(xiàn)在有很多網(wǎng)站把一些常用的圖標(biāo)都做成了字體圖標(biāo)分享了出來。目錄 字體圖標(biāo)的介紹 iconfont的使用 基于unicode的用法: ...
閱讀 1510·2021-11-22 13:52
閱讀 1324·2021-09-29 09:34
閱讀 2723·2021-09-09 11:40
閱讀 3042·2019-08-30 15:54
閱讀 1270·2019-08-30 15:53
閱讀 982·2019-08-30 11:01
閱讀 1371·2019-08-29 17:22
閱讀 1965·2019-08-26 10:57