wordpress：如何给导航添加图标，免费使用Iconfont图标！

使用wordpress建站时难免会为了好看的栏目图标而头疼，寻找加载速度快的图标相信是每个站长都需要的，之前用的Font Awesome图标算是比较经典的！但最近云站友换成了Iconfont图标，毕竟Iconfont是阿里旗下的，稳定性和速度相比Font Awesome更快，而且Iconfont目前已经拥有二百多万个图标，选择性多！下面就来介绍下wordpress如何使用Iconfont图标！

第一步、注册账号

首先打开 Iconfont 官网 ：https://www.iconfont.cn/         注册并登录账号

第二步、选择图标

然后选择 【ICON图标库】 选择你喜欢的图标（这里可以混搭无论那个贡献者，只要你喜欢的就行）

鼠标移动到需要选择的图标上，点击购物车的标志即可！（完全免费无需担心）

第三步、添加代码

选择完需要的图标后，点击网页右上角的购物车，点击【添加至项目】 ，如图：

添加到项目会来到下面这个页面，请按图示进行操作！

先复制这些代码到记事本中，因为还需要稍微修改一下，请继续往下看

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 3766323 */
  src: url('//at.alicdn.com/t/c/font_3766323_og76oncqzef.woff2?t=1668224402697') format('woff2'),
       url('//at.alicdn.com/t/c/font_3766323_og76oncqzef.woff?t=1668224402697') format('woff'),
       url('//at.alicdn.com/t/c/font_3766323_og76oncqzef.ttf?t=1668224402697') format('truetype');
}

/* 上面代码请替换成你刚生成的代码，切记！否则图标将不能正确识别！ */

/* 必须添加下面这段，云站友提供 www.yunzhanyou.com */
.iconfont{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}

请把刚刚生成的代码进行替换修改，然后添加到主题下的style.css文件中即可！如图

第五步、添加图标

到这里所有准备工作就完成了，接下来在网站中调用图标，复制修改下面代码进行修改，其中【】是图标标识，标识在刚生成代码的页面，如图

<i class="iconfont">&#xe98a;</i>

将以上代码修改好，复制到 外观-菜单 导航标签中即可！

例如原来从没添加过图标，这里应只有“首页”俩字，现在只需要在“首页”前面添加代码就行！如图

注意这里保存后，会变成这样 【<i class="iconfont"></i> 首页】，我们主要检查前台是否有变化，前台正常就行！来张成品图吧

如果想修改图标更换新的图标，需要从第二步依次执行一遍！即可！

虽然麻烦但加载速度快，实在搞不定可以找云站友付费解决！