阿里巴巴矢量圖里面可以下載很多小圖來用,也可以作為字體圖標下載應用。
作為圖片應用的話直接下載就好,可以自己選顏色大小。這次來說說作為字體圖標應用的使用過程。
步驟一:打開阿里巴巴矢量圖庫

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

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

步驟四:點擊購物車進入

步驟五:進行包下載

步驟六:把下載下來的包(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瀏覽器就沒效果了。

