WordPress为导航菜单添加个性图标字体

目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体。我所经常用的wordpress主题就可以自定义图标字体(百度搜索 聚创盟 导航中就能看到),我们还可以单独为导航菜单上的项目也配上个性化的图标字体。

具体方法:

一、WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。

二、WP后台---外观---菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入一个图标字体选择器名称,如图:


如果在编辑菜单项目面板中无CSS类,可以打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”。(好多人不知道菜单里点哪 能出来 css 类这个 ,这部就可以解决了!)

图标字体选择器名称,打开此页查看:http://fortawesome.github.io/Font-Awesome/icons/

点开一个认为合适的图标字体,在下会显示类似:

 
 
  1. <i class="fa fa-home"></i>

只需在菜单CSS类中输入fa fa-home就可以了。

那然这个图标字体库并不只局限于使用在导航菜单上,只要把相应的图标代码加到主题模板的相应位置,也同样可以显示。

如果认为上面插件提供的图标字体不符合自己的要求(其实这套Font Awesome图标字体早已烂大街),还可以自己做一套更加个性化的图标字体。

图标字体在线制作:https://icomoon.io/app/#/select

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
有些博主的博导航菜单设计的非常漂亮,这对于精通CSS的朋友来说,不是件难事,可对于不懂这些的朋友来说,有点小麻烦,所以,这款酷炫的导航菜单插件也就应运而生了。 Multi-level Navigation Plugin可以将导航菜单多级显示、下拉显示、弹出式显示!可以将存档、分类、页面、友情链接、评论等作为导航菜单,可以在后台设置界面修改css来达到自己想要的显示效果。 Multi-level Navigation Plugin安装: 1.下载Multi-level Navigation插件,将压缩包解压后,把文件夹上传到wp-content/plugins/目录下。 2.登录WordPress管理后台,点击“Plugins”找到上传的插件,激活该插件,即可。 3.激活插件后,在"Setting"版块下点击“Multi-level Navigation”对页面进行管理,如下图: 添加代码到你希望出现导航菜单的页面,通常添加在header.php文件里。 如上图中模板会出现如上四个模块: •Home:介绍插件的相关信息 •Appearance:设计导航菜单的样式 •Menu contents(菜单内容): 设置主菜单或二级菜单的内容,根据你网站的实际情况进行设置 •Settings:设置菜单显示效果 里面有多个内容选项,你可以根据网站的实际情况进行设置 设置好相关内容,插件的效果图就如下所示: 虽然这个插件比较酷炫,极大了方便了一些不精通CSS的朋友,但是,这个插件也不是万能的,使用这款插件时,你最起码要懂得些CSS知识,不然,即使再酷炫的插件也很难使用的恰到好处。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值