Wordpress导航图标设置具体步骤

怎样在Wordpress导航上添加自定义图标,让菜单栏更加引人注目,带来更多关注呢?下面分享一下自定义CSS样式的方式和代码。(本方法由网友Taokeplus提供,感谢他的热心分享)

先看效果:

导航菜单图标设置

首选,找到菜单找到CSSS类,填写daohang。

CSS类导航

 

其次,自定义CSS输入以下代码,方法:外观-自定义。

CSS类代码

CSS类代码如下:

.menu-item.daohang:after {
background-color: red;
border-radius: 3px;
color: #fff;
content: "热";
font-size: 10px;
line-height:1;
padding: 1px 3px;
position: absolute;
right: -1px;
top: 12px;
}
.kx-meta .fa-qq {
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
color: #fff;
background: #aaa;
border-radius: 3px;
vertical-align: top;
cursor: pointer;
}
.menu-item.daohang:after {
background-color: red;
border-radius: 3px;
color: #fff;
content: "热";
font-size: 10px;
line-height:1;
padding: 1px 3px;
position: absolute;
right: -1px;
top: 12px;
}

最后,网站的导航上是不是有一个小图标呢?你也可以自定义文字,在CSS里面的代码把文字替换复制上去就可以了。

有同学反馈说效果不出来,请大家直接下载这个TXT文档吧,就不会出问题了。

下载导航图标

本文介绍Wordpress导航图标设置方法到此结束,喜欢的朋友留言点赞分享。转载一定要保留原文出处。https://www.ainiseo.com/jianzhan/wordpress/3247.html

本站文章由SEO技术博客撰稿人原创,作者:无 忧创作,如若转载请注明原文及出处:https://www.ainiseo.com/wordpress/3247.html

(4)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2018年6月26日 下午5:16
下一篇 2018年6月28日 下午3:11

回复 深圳APP开发

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(2条)

联系我

由于平时工作忙:流量合作还是咨询SEO服务,请简明扼表明来意!谢谢!

在线咨询:点击这里给我发消息

邮件:wuyouseo@gmail.com 合作微信:wuyoublog

工作时间:周一至周六,9:30-22:30,节假日休息

个人微信
个人微信
分享本页
返回顶部