web中使用阿里巴巴矢量庫(kù)作為圖標(biāo)管理

• 阿里巴巴矢量庫(kù)
• • 矢量庫(kù)中項(xiàng)目圖標(biāo)
  • 將矢量庫(kù)引入項(xiàng)目中

阿里巴巴矢量庫(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ā)的便捷工具

矢量庫(kù)中項(xiàng)目圖標(biāo)

阿里巴巴矢量庫(kù)網(wǎng)址：https://www.iconfont.cn/

需要先登錄，可以使用github，阿里賬戶，新浪微博進(jìn)行登錄；

在首頁(yè)導(dǎo)航欄選擇 圖標(biāo)管理-我的項(xiàng)目-我參與的項(xiàng)目，找到UI為你設(shè)計(jì)的圖標(biāo)；

將矢量庫(kù)引入項(xiàng)目中

在我參與的項(xiàng)目-選擇你的項(xiàng)目，點(diǎn)擊Font Class；

2.點(diǎn)擊復(fù)制代碼，將復(fù)制的代碼以外部樣式的方式引入index.html文件里面，注意前面要加上http://

3.在項(xiàng)目中使用圖標(biāo)
在使用的地方按如下方式使用代碼，圖標(biāo)名稱為圖一中點(diǎn)擊圖標(biāo)后出現(xiàn)復(fù)制代碼，即可復(fù)制圖標(biāo)名稱，更換一下代碼圖標(biāo)名稱即可，iconfont樣式為固定樣式使用，必須添加。

<i class="iconfont 圖標(biāo)名稱 />

4.當(dāng)圖標(biāo)庫(kù)中的圖標(biāo)變化后,如果引入無(wú)法出現(xiàn),則需要重新替換之前的css引入文件地址,新加入的圖標(biāo)會(huì)導(dǎo)致重新生成css文件

總結(jié)

以上是生活随笔為你收集整理的web中使用阿里巴巴矢量库作为图标管理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。