阿里圖示庫iconfont如何使用
1、在阿里圖示庫(http://iconfont.cn/)選擇自己喜歡的一個或多個圖示,效果如下圖所示
2、網頁右上角的小購物車,
3、這裡我們選擇下載程式碼。下載好了後在專案需要的地方解壓。
4、這是我下載好的壓縮檔案以及解壓後的檔案。
5、下載好了以後,會看到有三個html檔案,我們用瀏覽器開啟,他是三種引入圖示的方法,我們根據自己的需要自行選擇。
6、舉例子來說,我個人喜歡用
新建一個資料夾,名字自己取吧!我的叫font,放入這四個檔案。與font平級的放iconfont.css
html中的style:
.iconfont{ color: blue; } @font-face { font-family: 'iconfont'; src: url('font/iconfont.eot'); src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), url('font/iconfont.woff') format('woff'), url('font/iconfont.ttf') format('truetype'), url('font/iconfont.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
body中
<body> <ul> <li><a href=""><!--<i class="iconfont icon-yifu"></i>-->1男裝/女裝</a></li> <li><a href=""><!--<span class="iconfont icon-15"></span>-->2鞋靴/箱包</a></li> <li><a href=""><i class="iconfont"></i>3傢俱</a></li> <li><a href=""><i class="iconfont"></i>4傢俱</a></li> <li><a href=""><i class="iconfont">㑆</i>5傢俱</a></li> </ul> </body>
這些圖示都可以當成font來處理,改顏色大小之類的,都和文字一樣。