阿里巴巴矢量圖之字體圖標應用以及添加新的字體圖標


阿里巴巴矢量圖里面可以下載很多小圖來用,也可以作為字體圖標下載應用。

作為圖片應用的話直接下載就好,可以自己選顏色大小。這次來說說作為字體圖標應用的使用過程。

步驟一:打開阿里巴巴矢量圖庫

步驟二:搜索自己想要的圖標

步驟三:統一加到購物車里面。添加入庫

步驟四:點擊購物車進入

步驟五:進行包下載

步驟六:把下載下來的包(js和demo的html,css不用)拿到項目里面。在HTML里面引入iconfont.css,然后打開css,里面有詳細使用類名,用的時候用i  span標簽進行放置,里面加一個固定iconfont類,再加一個代表這個圖標的類

只要對應起來,就能使用了。

 

 

 

大部分我們的字體圖標都是批量下載的,這批下載下來應用了之后,下一次又有新的想用,又下載了新的,如何追加使用呢。

步驟一:下載新的字體圖標同上步驟

步驟二:新的字體圖標里面有自己的iconfont.css,里面引用的幾個文件都是同一批次下載下來的,可根據里面引用把相應的文件復制到當前字體圖標的文件里面,

但是名字不能與原來的沖突,改完名字之后css里面的引用地址名字也作出相應改變,然后把新的@font-face模塊和代表類名的一塊一起復制到原來的iconfont.css里面,即可。

 

@font-face里面的引用,是針對不同瀏覽器的,自己測試如果是谷歌這樣的高兼容瀏覽器,你可以什么文件都不用往項目里面放,直接引入一個iconfont.css文件,追加的時候把

新下載的iconfont.css文件里面的@font-face頭復制到原來的iconfont.css里面,也是可以用的。只不過IE瀏覽器就沒效果了。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM