資訊專(zhuān)欄INFORMATION COLUMN
摘要：我之前因?yàn)轫?xiàng)目用比較多所以使用字體圖標(biāo)比較多后來(lái)接觸到了發(fā)現(xiàn)想要的什么圖標(biāo)都有還可以自定義圖標(biāo)非常強(qiáng)大之前看了一波教程覺(jué)得繁瑣自己弄明白后感覺(jué)如此簡(jiǎn)單做了這么個(gè)簡(jiǎn)單教程直接上圖簡(jiǎn)單粗暴避免新手走彎路這里講解的默認(rèn)是元素使用類(lèi)名百度找到阿里巴
我之前因?yàn)轫?xiàng)目用bootstrap比較多,所以使用font awesome字體圖標(biāo)比較多,后來(lái)接觸到了iconfont,發(fā)現(xiàn)想要的什么圖標(biāo)都有,還可以自定義圖標(biāo),非常強(qiáng)大!之前看了一波教程,覺(jué)得繁瑣,自己弄明白后感覺(jué)如此簡(jiǎn)單,做了這么個(gè)簡(jiǎn)單教程,直接上圖,簡(jiǎn)單粗暴,避免新手走彎路,這里講解的默認(rèn)是元素使用類(lèi)名;
step 1:百度iconfont,找到阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng),然后注冊(cè)登錄,或者用github登錄也行,此步驟跳過(guò);
step 2:找到圖標(biāo)管理->我的項(xiàng)目->然后新建項(xiàng)目:
右邊點(diǎn)擊新建項(xiàng)目,用于保存自己常用的圖標(biāo);
step 3:項(xiàng)目新建完成后,往項(xiàng)目里添加我們要想使用的圖標(biāo),找到圖標(biāo)庫(kù),搜索一個(gè)想要的圖標(biāo),然后添加到購(gòu)物車(chē);
?
?我現(xiàn)在將第一個(gè)安卓圖標(biāo)加入我的項(xiàng)目,點(diǎn)擊加入購(gòu)物車(chē)
step 4:添加到購(gòu)物車(chē)完成后,購(gòu)物車(chē)徽章數(shù)字應(yīng)該顯示1了,點(diǎn)擊右上角的購(gòu)物車(chē)圖標(biāo),選擇添加至項(xiàng)目,選擇我們剛剛創(chuàng)建的項(xiàng)目,確定;
自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的項(xiàng)目里了,如圖:
step 5:接下來(lái)一部比較關(guān)鍵,將打包好的字體文件下載到本地添加到你的項(xiàng)目中,在項(xiàng)目中引用文件中的iconfont.css文件;
下載下來(lái)解壓后的文件如下:
強(qiáng)調(diào)一次,把上面這些文件都放在一個(gè)文件夾內(nèi)，然后放在你的項(xiàng)目目錄中,再在你的項(xiàng)目中引入iconfont.css文件
?
step 6:到了最后一步了,如何在項(xiàng)目中使用字體圖標(biāo)呢,其實(shí)很簡(jiǎn)單,創(chuàng)建一個(gè)i標(biāo)簽或者span標(biāo)簽,添加兩個(gè)類(lèi)名,一個(gè)固定的是iconfont,另一個(gè)是你想要的那個(gè)圖標(biāo)對(duì)應(yīng)的類(lèi)名:
具體代碼如下:
好了,刷新頁(yè)面,圖標(biāo)是不是出來(lái)了呢?
Ok,到這一步,恭喜你成功了,是不是很簡(jiǎn)單,不簡(jiǎn)單?那就從頭再看一遍;
調(diào)節(jié)字體圖標(biāo)的大小是通過(guò)元素的font-size屬性來(lái)控制的;
?
轉(zhuǎn)自：https://www.cnblogs.com/hjvsdr/p/6639649.html
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1880.html
摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無(wú)法實(shí)現(xiàn)請(qǐng)往下看開(kāi)發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫(xiě)了一篇關(guān)于雪碧圖的博文，...
摘要：字體圖標(biāo)的不足既然字體圖標(biāo)那么有效率，那么為什么不都使用字體圖標(biāo)呢現(xiàn)在的限制主要是字體圖標(biāo)的開(kāi)發(fā)要求比較高，畢竟是開(kāi)發(fā)一種字體。自己開(kāi)發(fā)字體圖標(biāo)很累，幸好有很多樂(lè)于分享的，現(xiàn)在有很多網(wǎng)站把一些常用的圖標(biāo)都做成了字體圖標(biāo)分享了出來(lái)。目錄 字體圖標(biāo)的介紹 iconfont的使用 基于unicode的用法： ...
摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說(shuō)起要想了解，得從一個(gè)新的規(guī)則說(shuō)起。因?yàn)橛脩魶](méi)有安裝的話，我們強(qiáng)制要求顯示也沒(méi)有辦法。國(guó)內(nèi)有阿里巴巴的平臺(tái)，可以選自己喜歡的圖標(biāo)導(dǎo)出。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...
摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說(shuō)起要想了解，得從一個(gè)新的規(guī)則說(shuō)起。因?yàn)橛脩魶](méi)有安裝的話，我們強(qiáng)制要求顯示也沒(méi)有辦法。國(guó)內(nèi)有阿里巴巴的平臺(tái)，可以選自己喜歡的圖標(biāo)導(dǎo)出。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...
閱讀 1532·2023-04-25 16:31
閱讀 2113·2021-11-24 10:33
閱讀 2804·2021-09-23 11:33
閱讀 2620·2021-09-23 11:31
閱讀 3024·2021-09-08 09:45
閱讀 2413·2021-09-06 15:02
閱讀 2729·2019-08-30 14:21
閱讀 2383·2019-08-30 12:56
