云站友
使用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"></i>
将以上代码修改好，复制到 外观-菜单 导航标签中即可！
例如原来从没添加过图标，这里应只有“首页”俩字，现在只需要在“首页”前面添加代码就行！如图
注意这里保存后，会变成这样 【<i class="iconfont"></i> 首页】，我们主要检查前台是否有变化，前台正常就行！来张成品图吧
如果想修改图标更换新的图标，需要从第二步依次执行一遍！即可！
虽然麻烦但加载速度快，实在搞不定可以找云站友付费解决！
评论前必须登录！
立即登录 注册