1. 程式人生 > >阿里圖示庫iconfont如何使用

阿里圖示庫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">&#xe666;</i>3傢俱</a></li>             <li><a href=""><i class="iconfont">&#xe60f;</i>4傢俱</a></li>             <li><a href=""><i class="iconfont">&#x3446;</i>5傢俱</a></li>         </ul>     </body>

這些圖示都可以當成font來處理,改顏色大小之類的,都和文字一樣。