wordpress 美化 - 引用阿里巴巴矢量图标库

阿里巴巴矢量图标库是一个汇聚了大量专业设计师的图标网站，在这里你可以找到各种各样的图标并免费使用。那么，该如何给自己的 WordPress 博客加上阿里巴巴矢量图标库的图标你？

我们将通过这次 WordPress 美化教程以大量的图片的方式教你一步步的做。

• 网站网址：阿里巴巴矢量图标库
• 参考文章：详情
• **使用文档：

**详情

第一步：

登录阿里巴巴矢量图标库网站，通过搜索框找到自己喜爱的图标并添加至购物车

没有项目的话可以创建一个，成功后就来到了“我的项目”页面。

第二步：

点击“查看在线链接”按钮，没有的的话可以点击生成链接，将显示的代码添加至主题根目录下的 style.css 文件底部

在这里我以最新的 wordpressz 博客主题 2020 演示：

第三步：添加图标

然后在阿里巴巴矢量图标库中复制图标代码，

将复制到的代码以下面的形式添加至菜单中：

1
<i class="iconfont"></i>

保存菜单后刷新前台即可看到效果。

提示：

如果菜单图标显示异常，可在主题的 style.css 文件底部添加以下代码解决：

1
.iconfont{
2
  font-family:"iconfont" !important;
3
  font-style:normal;
4
  -webkit-font-smoothing: antialiased;
5
  -webkit-text-stroke-width: 0.2px;
6
  -moz-osx-font-smoothing: grayscale;
7
}

本次 WordPress 美化教程就分享到这里了，希望能帮助各位站长让自己的网站变的更加有趣。

但这个教程引用的图标只是黑白的，如果需要引用彩色的(不推荐)可以看看这个教程：