阿里圖標(biāo)庫(kù)怎么使用?阿里圖標(biāo)庫(kù)iconfont如何使用

字?jǐn)?shù): (926)

閱讀: (16085)

阿里圖標(biāo)庫(kù)Iconfont-國(guó)內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫(kù),提供矢量圖標(biāo)下載、在線(xiàn)存儲(chǔ)、格式轉(zhuǎn)換等功能。阿里巴巴體驗(yàn)團(tuán)隊(duì)傾力打造,設(shè)計(jì)和前端開(kāi)發(fā)的便捷工具

第1步：首先在Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)上面將你需要的圖標(biāo)點(diǎn)擊購(gòu)物車(chē)按鈕加入“暫存架”

第2步：選擇完所有要用的圖標(biāo)后“存儲(chǔ)為項(xiàng)目”，給它命名。然后在“圖標(biāo)管理”-“圖標(biāo)應(yīng)用項(xiàng)目”中找到這個(gè)項(xiàng)目，獲取在線(xiàn)鏈接，把里面的代碼復(fù)制到CSS中。

第3步：在HTML中需要使用到圖標(biāo)時(shí)，使用iconfont類(lèi)名。

<i class="iconfont">&#xe600;</i>

里面寫(xiě)上你想用的圖標(biāo)下面的Unicode：

第4步：然后你可以通過(guò)控制iconfont類(lèi)的屬性改變圖標(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è)面中引用和修改了。

阿里圖標(biāo)庫(kù)還列出了使用時(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)的話(huà)要重新把所有圖標(biāo)再下載一遍覆蓋原來(lái)的文件，如果是在線(xiàn)鏈接只要重新生成一次鏈接就好了。