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