码云笔记前端博客
Home > WP教程 > 如何为WordPress导航菜单添加个性图标字体

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

2019-06-04 分类:WP教程 作者:码云 阅读(5482)

本文共计648个字,预计阅读时长需要2分钟。

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

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

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

使用方法

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

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

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

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

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

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

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

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

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

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

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

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
0

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 如何为WordPress导航菜单添加个性图标字体

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论