WordPress导航图标设置具体步骤

深圳SEO
深圳SEO
深圳SEO
28426
文章
0
评论
2020年3月23日01:29:05 评论 3,211

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

  先看效果:

  WordPress导航图标设置具体步骤WordPress导航图标设置具体步骤

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

  WordPress导航图标设置具体步骤WordPress导航图标设置具体步骤

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

  WordPress导航图标设置具体步骤WordPress导航图标设置具体步骤

  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
低热量食谱(低热量食物一览表) 站长资讯

低热量食谱(低热量食物一览表)

  低热量食谱(低热量食物一览表)原创Meggy跳舞的苹果2021-02-23 1百思特网7:52:26   过节油腻菜吃多了,最近清爽低脂的家常菜比较受欢迎,今天苹果姐分享10道菜,做法简单易学,开...
中秋节的知识(中秋节知识大全) 站长资讯

中秋节的知识(中秋节知识大全)

  中秋节的知识(中秋节知识大全)   中秋节,又称月夕、秋节、仲秋节、八月节、八月会、追月节、玩月节、拜月节、女儿节或团圆节,是流行于中国众多民族与汉字文化圈诸国的传统文化节日,时在农历八月十五;因...
英语教学案例(英语课堂教学案例) 站长资讯

英语教学案例(英语课堂教学案例)

  英语教学案例(英语课堂教学案例)   课堂是进行教育教学的主阵地。我们处在信息的时代,课堂教学需要注入更多新的元素,使之焕发新的活力,从而优化课堂教学,提高教学质量,由传统的“认知型、灌输型、封闭...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: