学习永不停止
我们一起努力吧!

简单技巧:wordpress导航文字前加个性小图标(无须插件)

简考题库免费下载

今天有一网友问“你wordpress导航文字前面的图标是如何加上去的呢?”。本着分享的初衷,于是就写下了本文。

网上对于如何在“wordpress导航加图标”有各种各样的方法,有些主题模板甚至配上了加图标的位置,也有人开发了插件,但个人认为,用最简单的方法能实现就是好方法。下面就将这种方法写出来,希望能给大家一点启示吧!

首先,我们进入WP管理后台–外观–菜单,打到自己定义好的导般名称,比如“首页”,见下图:

接着,我们用Dreamweaver进行辅助,创建一组(如上图的“导航标签”)的代码:

<img src="图标地址" alt="首页" />首页

或者将上面的代码复制,将“图标地址”改成自己的图片地址即可。此处的“导航标签”兼容性很大,一般的html代码都能接纳,比如我们的图片很大,我们可以加入以下代码:

<img src="图标地址" alt="首页" width="20" height="20" />首页

还有字体、颜色等等都可以通过这种方式来处理。不过有点遗憾的是,太长的代码加入会在上面显示出来,影响视觉。所以大家如果没有找到很好的加“导航图标”方法前,将图片裁剪成刚好的尺寸,尽量让代码变短,做成如下的效果是很轻松的:

前几天有朋友反映IE6不兼容,那就在主题下面的style.css加上这么一组代码吧:

.topnav li img{_padding-top:11px;}

教程至此完毕,有好的方法欢迎留言,一起交流共同进步!

未经允许不得转载:http://jdks100.com/风语守望_博客 » 简单技巧:wordpress导航文字前加个性小图标(无须插件)


分享到:更多 ()
关注“公众平台”:     资源分享QQ群(517095212):

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • 5 + 2 = ?

风语守望_博客,共同学习,一起成长!

网站首页联系我们
防复制