在搭建博客的时候，我们通常会在导航栏添加小图标进行美化，虽然部分主题有内置引用第三方图标，但基于版权等因素，缺乏诸如阿里图标等第三方图标引用，扩展性仍然差点意思。于我个人而言，又比较喜欢的是阿里图标，所以在网上查询引用方法后，发现大部分方法是无效或者比较复杂的，最终在阅读阿里图标官方文档后，成功在博客导航引用阿里图标。

适用范围

本方法基于Symbol引用阿里图标，适用于任何基于Wordpress搭建博客，无需依赖主题，来源参考阿里图标官方使用文档。

官网地址：iconfont-阿里巴巴矢量图标库

拷贝项目下面生成的symbol代码

通过阿里图标官网注册登陆账号，先搜索相应的图标并添加至购物车（免费使用），最后统一添加到对应的项目中（无则新建项目），成功之后我们可以在个人中心项目管理中看到自己收藏的一些图标样式。

首先我们点击Symbol，会看到下方有一个类似于 //at.alicdn.com/t/xxxxxx 的地址，复制该地址并在下方代码中替换你复制的地址，然后在Wordpress管理后台外观>主题文件编辑器 中，选择 footer.php 文件，在页面中插入该代码，目的是在线引用阿里图标js文件，无需下载图标文件上传服务器，值得注意的是后期如有新增图标操作，需要及时更新 Symbol 地址，并同步更新主题文件引用的图标地址。

<script src="粘贴替换你复制的js文件地址"></script>

加入通用css代码（引入一次就行）

接下来只需要通过自定义css插入阿里图标通用代码即可，如果主题或者插件有自定义css功能，在该功能区域直接插入即可，没有的话在主题管理自定义css区域复制粘贴通用css代码即可，只需引入一次，后续更新图标无需再修改此处。

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

挑选相应图标并获取类名，应用于页面

接下来，我们再回到阿里图标的项目管理界面，在选择对应的图标后，根据提示复制相应的图标代码。

然后将复制的代码替换下方 #icon-xxx 部分即可，接着将下方整段代码复制到导航栏的标签名称前面即可。

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

根据阿里图标官方介绍，symbol  是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，相对传统的font-class 引用和单个icon 引用，symbol 具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

以上就是WroodPress博客站点通过 symbol 引用阿里图标的全过程，相对传统的font-class 引用和单个icon 引用，还是比较方便和自由的，正如阿里图标介绍的第二点，由于是字体图标的形式，我们还可以通过在css中添加 font-size:16px；属性来调整图标的大小，而且图标还不会失真。