教大家如何將阿里巴巴矢量圖標(biāo)庫里精彩的圖標(biāo)引用到自己的wordpress博客網(wǎng)站
阿里巴巴矢量圖標(biāo)庫是一個匯聚了大量專業(yè)設(shè)計(jì)師的圖標(biāo)網(wǎng)站，在這里你可以找到各種各樣的圖標(biāo)并免費(fèi)使用。那么，該如何給自己的wordpress博客加上阿里巴巴矢量圖標(biāo)庫的圖標(biāo)你？我們將通過這次wordpress美化教程以大量的圖片的方式教你一步步的做。
- 網(wǎng)站網(wǎng)址：阿里巴巴矢量圖標(biāo)庫
- 參考文章：詳情
- 使用文檔：詳情
第一步：
登錄阿里巴巴矢量圖標(biāo)庫網(wǎng)站，通過搜索框找到自己喜愛的圖標(biāo)并添加至購物車
沒有項(xiàng)目的話可以創(chuàng)建一個，成功后就來到了“我的項(xiàng)目”頁面。
第二步：
點(diǎn)擊“查看在線鏈接”按鈕，沒有的的話可以點(diǎn)擊生成鏈接，將顯示的代碼添加至主題根目錄下的style.css文件底部
在這里我以最新的wordpressz博客主題2020演示：
第三步：添加圖標(biāo)
然后在阿里巴巴矢量圖標(biāo)庫中復(fù)制圖標(biāo)代碼，
將復(fù)制到的代碼以下面的形式添加至菜單中：
<i class="iconfont"></i>
保存菜單后刷新前臺即可看到效果。
提示：
如果菜單圖標(biāo)顯示異常，可在主題的style.css文件底部添加以下代碼解決：
.iconfont{
font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
本次wordpress美化教程就分享到這里了，希望能幫助各位站長讓自己的網(wǎng)站變的更加有趣。但這個教程引用的圖標(biāo)只是黑白的，如果需要引用彩色的(不推薦)可以看看這個教程：
