本次以Dragon龙笑天主题用JS实现菜单栏彩色图标为基础来写本文章：
1、进入Iconfont网站，搜索想要的icon图标 https://www.iconfont.cn/加入仓库
2、选择所需要的所有icon添加入库后，可以点击上方的库存，将所有icon添加到某个项目
3、建好后在我的项目中，选择刚刚添加的项目，然后点击 Font class 生成JS地址代码
4、把生成的JS代码链接地址引入Dragon龙笑天主题的头部-Header中加载自定义代码-相应位置（每次添加更新图标时都要重新点击更新代码并替换）
<script src="你生成的JS代码地址"></script>
5、加入通用 CSS 代码，在Dragon龙笑天主题文件夹中，/wp-content/themes/dragon里面，找到style.css文件打开在里面最后面添加并保存
/*阿里巴巴图标*/
svg.icon{
width:1.5em;
height:1.5em;
vertical-align:-10%;
}其中图标大小可以改1.5em 两个改一样
5、在菜单栏中引用进来，比如菜单栏：以本站主页图标为例
<svg class="icon" aria-hidden="true"> <use xlink:href="#xuanloog-home"></use> </svg> 首页
其中xuanloog-home为图标代号，就是从阿里icon上面复制下来的代码，这里我改过所以是xuanloog开头，如果没改过就是icon-home
最后效果图为：
最后说一下，每次重新添加或者删除这个项目中的图标之后，都应该重新将生成的CSS代码地址重新更新刷新， 然后引入的地址重新更改才有效哦。
—————————————————————————————————
本站使用的就是Dragon龙笑天主题，此主题过于牛逼不过多介绍...
专属折扣码xuanloog
声明：本文来自凤凰投稿，不代表吾站网立场，版权归原作者所有，欢迎分享本文，转载请保留出处！
