Dragon龙笑天主题用JS实现Iconfont矢量库彩色图标教程 怎么把WordPress菜单栏设置支持彩色图标

本次以Dragon龙笑天主题用JS实现菜单栏彩色图标为基础来写本文章：

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

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

3、建好后在我的项目中，选择刚刚添加的项目，然后点击 Symbol
生成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

购买链接https://www.ilxtx.com/dragon.html?aff=m4kwqr4lx