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

首先去iconfont主題庫，注冊一個賬號，然后就可以找自己喜歡的圖標了，找到后點擊添加購物車，就會到了右側的購物車中，然后去個人中心下載即可。

第一步：將代碼加到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; }

第三步：選樣式圖標加入

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

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

歡迎關注我的公眾號“xx主題網”，原創技術文章第一時間推送。

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

---

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。