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

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

 

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

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

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

 

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

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

怎么把WordPress菜单栏设置支持彩色图标 Dragon龙笑天主题用JS实现Iconfont矢量库彩色图标教程
4、把生成的JS代码链接地址引入Dragon龙笑天主题的头部-Header中加载自定义代码-相应位置(每次添加更新图标时都要重新点击更新代码并替换)

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

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

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> 首页

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

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

最后效果图为:

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

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

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

本站使用的就是Dragon龙笑天主题,此主题过于牛逼不过多介绍...

专属折扣码xuanloog

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

本文来自投稿,不代表吾站网立场,版权归原作者所有,欢迎分享本文,转载请保留出处!

2021-05-24

2021-05-24

发表评论

表情 格式 链接 私密 签到
扫一扫二维码分享