xx-blog主題使用的圖標(biāo)庫是阿里巴巴的iconfont，因此這里介紹一下此主題庫的用法。

首先去iconfont主題庫，注冊(cè)一個(gè)賬號(hào)，然后就可以找自己喜歡的圖標(biāo)了，找到后點(diǎn)擊添加購物車，就會(huì)到了右側(cè)的購物車中，然后去個(gè)人中心下載即可。

第一步：將代碼加到xx-blog主題style.css中

/* 引用字體文件（注意url中文件的路徑）format告訴瀏覽器這些字體文件以什么格式解析 */ @font-face {font-family: 'iconfont';src: url('iconfont.eot');/* IE9*/src: url('iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */url('iconfont.woff') format('woff'),/* chrome, firefox */url('iconfont.ttf') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg#iconfont') format('svg');/* iOS 4.1- */ }

第二步：定義使用 iconfont樣式

.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; }

第三步：選樣式圖標(biāo)加入

<i class="iconfont icon-xing"></i>

這樣就可以在主題中使用自己定義的樣式了。

歡迎關(guān)注我的公眾號(hào)“xx主題網(wǎng)”，原創(chuàng)技術(shù)文章第一時(shí)間推送。

文章來源https://www.xxzhuti.com/767.html

---

總結(jié)

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

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