一为OneNav导航主题用JS用Iconfont矢量库把WordPress菜单栏设置彩色图标教程

温馨提示：做完如果出现有黑白图标或者大空格看文低重要提示！

本基于OneNav导航主题用JS实现菜单栏彩色图标为基础来写本文章：

 

1、进入Iconfont网站，搜索想要的icon图标 https://www.iconfont.cn/加入仓库

2、选择所需要的所有icon添加入库后，可以点击上方的库存，将所有icon添加到某个项目

 

3、建好后在我的项目中，选择刚刚添加的项目，然后点击 Font class 生成JS地址代码

4、把生成的JS代码链接地址引入OneNav导航主题的：主题设置-添加代码-顶部(header)自定义 js 代码-相应位置（每次添加更新图标时都要重新点击更新代码并替换）

<script src="你生成的JS代码地址"></script>

5、加入通用 CSS 代码，OneNav导航主题的：主题设置-添加代码-自定义样式css代码

svg.icon{
	width:1.7em;
	height:1.7em;
	vertical-align:-10%;
}

其中图标大小可以改1.5em 两个改一样

5、在菜单栏中引用进来，比如菜单栏：以主页图标为例

<svg class="icon" aria-hidden="true"> <use xlink:href="#so-home"></use> </svg> 首页

其中so-home为图标代号，就是从阿里icon上面复制下来的代码，这里我改过所以是so开头，如果没改过就是icon-home

最后效果图为：

最后说一下，每次重新添加或者删除这个项目中的图标之后，都应该重新将生成的CSS代码地址重新更新刷新， 然后引入的地址重新更改才有效哦。

重要提示：侧栏主菜单会出现旧的图标或者默认图标，解决办法是

CSS类这里填默认格式的 io io-dianyingpiao 也就是说在你原来黑白基础上做出修改就可以了

底部菜单和顶部菜单有大空格解决办法是

CSS类这里填默认格式的 io-dianyingpiao 也就是说在你原来黑白基础上做出修改就可以了

最后到OneNav导航主题的：主题设置-其他功能，把阿里图标和fontawesome CDN都关了，就完美解决了

—————————————————————————————————

本教程基于OneNav导航主题，OneNav导航主题：集网址、资源、资讯于一体的
WordPress 导航主题。

购买链接https://www.iotheme.cn/?aff=100258