最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

最近大家也都看到了码云笔记在经过大的改版使用新的主题之后,也给菜单用上了图标字体,确实给博客带来了一定的美化效果。所以今天也将方法总结一下,目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体。

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

与之配套的是font awesome 4 menus这个图标字体插件,其实还是挺小巧的。

使用方法

首先,打开WP后台,选择插件之安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。

然后,找到外观下的菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入一个图标字体选择器名称,如图:

注:如果在编辑菜单项目面板中无CSS类,可以打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”。

图标字体选择器名称,打开此页查看:http://www.fontawesome.com.cn/faicons/

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

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

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

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

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

如果认为上面插件提供的图标字体不符合自己的要求,还可以自己做一套更加个性化的图标字体。

图标字体在线制作,之前我也写过一篇关于图标制作的教程,大家可以看这篇《如何将SVG文件转换成图标字体文件

好了,本文就分享到这里,喜欢折腾的朋友可以试试看。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 如何为WordPress导航菜单添加个性图标字体

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发