歡迎訪問(wèn)七一網(wǎng)(www.7js0i.cn)我們用心收錄您的愛(ài)站!
阿里圖標(biāo)庫(kù)Iconfont-國(guó)內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫(kù),提供矢量圖標(biāo)下載、在線存儲(chǔ)、格式轉(zhuǎn)換等功能。阿里巴巴體驗(yàn)團(tuán)隊(duì)傾力打造,設(shè)計(jì)和前端開(kāi)發(fā)的便捷工具
1.首先在Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)上面將你需要的圖標(biāo)點(diǎn)擊購(gòu)物車按鈕加入“暫存架”
2.選擇完所有要用的圖標(biāo)后“存儲(chǔ)為項(xiàng)目”,給它命名。然后在“圖標(biāo)管理”-“圖標(biāo)應(yīng)用項(xiàng)目”中找到這個(gè)項(xiàng)目,獲取在線鏈接,把里面的代碼復(fù)制到CSS中。
3.在HTML中需要使用到圖標(biāo)時(shí),使用iconfont類名。
4.然后你可以通過(guò)控制iconfont類的屬性改變圖標(biāo)的樣式,比如:
.iconfont{ font-family:"iconfont"; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; padding-left:20px}
就可以在頁(yè)面中引用和修改了。官網(wǎng)中還列出了使用時(shí)候的兼容性問(wèn)題及其解決方法:Page 2這些圖標(biāo)也可以下載到本地使用。圖標(biāo)都加入暫存架后選擇“下載到本地”,會(huì)得到以下幾個(gè)文件:
瀏覽器打開(kāi)demo.html可以看到每個(gè)圖標(biāo)的Unicode,把iconfont.css里的代碼復(fù)制到css里面,把下面四個(gè)文件放到css可以引用到的文件夾里就可以了。下載使用的一個(gè)缺點(diǎn)是添加圖標(biāo)的話要重新把所有圖標(biāo)再下載一遍覆蓋原來(lái)的文件,如果是在線鏈接只要重新生成一次鏈接就好了。
相關(guān)閱讀
標(biāo)簽
發(fā)表評(píng)論(留言|咨詢)