如何为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 文件转换成图标字体文件

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何为WordPress导航菜单添加个性图标字体

发表回复