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

凤凰 2021-5-24 129 5/24

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

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

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

 

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

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

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

 

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

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

一为OneNav导航主题用JS用Iconfont矢量库把WordPress菜单栏设置彩色图标教程
4、把生成的JS代码链接地址引入OneNav导航主题的:主题设置-添加代码-顶部(header)自定义 js 代码-相应位置(每次添加更新图标时都要重新点击更新代码并替换)

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

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

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

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

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

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

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

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

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

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

最后效果图为:

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

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

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

io io-dianyingpiao 也就是说在你原来黑白基础上做出修改就可以了

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

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

io-dianyingpiao 也就是说在你原来黑白基础上做出修改就可以了

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

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

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

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

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

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

- THE END -

凤凰

5月24日17:26

最后修改:2021年5月24日
0

非特殊说明,本博所有文章均为博主原创。