歡迎訪問七一網(www.lzbaijiu.com)我們用心收錄您的愛站!
阿里圖標庫Iconfont-國內功能很強大且圖標內容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉換等功能。阿里巴巴體驗團隊傾力打造,設計和前端開發(fā)的便捷工具
1.首先在Iconfont-阿里巴巴矢量圖標庫上面將你需要的圖標點擊購物車按鈕加入“暫存架”
2.選擇完所有要用的圖標后“存儲為項目”,給它命名。然后在“圖標管理”-“圖標應用項目”中找到這個項目,獲取在線鏈接,把里面的代碼復制到CSS中。
3.在HTML中需要使用到圖標時,使用iconfont類名。
4.然后你可以通過控制iconfont類的屬性改變圖標的樣式,比如:
.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}
就可以在頁面中引用和修改了。官網中還列出了使用時候的兼容性問題及其解決方法:Page 2這些圖標也可以下載到本地使用。圖標都加入暫存架后選擇“下載到本地”,會得到以下幾個文件:
瀏覽器打開demo.html可以看到每個圖標的Unicode,把iconfont.css里的代碼復制到css里面,把下面四個文件放到css可以引用到的文件夾里就可以了。下載使用的一個缺點是添加圖標的話要重新把所有圖標再下載一遍覆蓋原來的文件,如果是在線鏈接只要重新生成一次鏈接就好了。
相關閱讀
標簽
發(fā)表評論(留言|咨詢)