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

目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体,包括我制作的Ality主题和目前用的Begin主题,除了主题集成的图标字体,我们还可以单独为导航菜单上的项目也配上个性化的图标字体。

具体方法:

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

(注:Begin主题用户无需安装上述插件)

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

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

font

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

图标字体选择器名称,打开此页查看:http://fontawesome.io/icons/

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

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

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

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

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

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

侧边分类小工具添加图标看这里第2条

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:54   其中:访客  46   博主  3   引用   5

    • avatar 图纸加密软件 来自天朝的朋友 火狐浏览器 Windows 7 湖北省武汉市 (汉阳区)电信 0

      这个里面的功能是最多的,也是非常实用的

      • avatar 懿古今 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市 2

        加上个性图标后,好看了很多

        • avatar hanbing17 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通 2

          好看了很多

          • avatar 散文精选 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市玄武区 电信 6

            学习了 不错的方法

            • avatar 两天 来自天朝的朋友 谷歌浏览器 Windows 10 山东省临沂市 移动 6

              这个,不用插件自己怎么搞

                • avatar 大谋士网 来自天朝的朋友 谷歌浏览器 Windows 7 云南省昆明市 电信 3

                  @两天 这个直接加载调用图表字体,然后在需要的地方可以调用

                • avatar 海蓝辰风 来自天朝的朋友 Internet Explorer Windows 7 浙江省杭州市 华数宽带 2

                  不错,我之前也想知道怎么添加这些图标,现在知道了,谢谢分享哦。。。 :smile:

                  • avatar 海蓝辰风 来自天朝的朋友 Internet Explorer Windows 7 浙江省杭州市 华数宽带 2

                    鸟哥,我下载了插件,也把图形的代码放进去了,怎么没反应呢?? :mad:

                      • avatar 009 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 电信 5

                        @海蓝辰风 可以打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”。

                          • avatar 海蓝辰风 来自天朝的朋友 Internet Explorer Windows 7 浙江省杭州市 华数宽带 2

                            @009 我确实已经勾选了,,也把相应图标代码写进去了,还是没用哦,,是不是有什么没有注意的呢

                        • avatar 鲜活 来自天朝的朋友 谷歌浏览器 Windows 8 广东省湛江市 移动 3

                          wordpress玩到极致了

                          • avatar 它季 来自天朝的朋友 谷歌浏览器 Windows 7 云南省大理州 电信 2

                            这个功能不错,现在很多主题菜单中都在使用个性图标来美化。

                            • avatar 冰镇椰子汁 来自天朝的朋友 谷歌浏览器 Windows 8.1 天津市 联通数据中心 2

                              Ality主题不更新了?

                              • avatar vps推荐 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信 0

                                不错,我之前也想知道怎么添加这些图标,现在知道了

                                • avatar 看起来不错 来自天朝的朋友 搜狗浏览器 Windows 7 上海市 电信 0

                                  博主对wordpress非常了解啊!

                                  • avatar jacksuc 来自天朝的朋友 谷歌浏览器 Windows 8.1 江西省新余市 电信 7

                                    原来是用的这款字体,我最近也发现了。

                                    • avatar 点滴生活博客 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信 1

                                      我也想转WordPress了,功能略强大。合适我这种新手

                                      • avatar 灰常记忆 来自天朝的朋友 火狐浏览器 Windows XP 浙江省嘉兴市 电信 3

                                        等我买了,再试试。

                                        • avatar 眼幕微启 来自天朝的朋友 火狐浏览器 Windows 7 重庆市 电信 5

                                          非常不错的功能

                                          • avatar 励志小兴 来自天朝的朋友 谷歌浏览器 Windows 8.1 浙江省 移动 2

                                            学习了,非常实用,添加图标对博客展示也好

                                            • avatar Kael 来自天朝的朋友 QQ浏览器 Windows 7 浙江省台州市 电信 7

                                              鸟哥,为什么我原博客换域名后,数据库里也调整了,页面上访问都是正常的,但是从文章归档里点击文章标题,都是指向原网站的,这是为什么?

                                                • avatar 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows XP 辽宁省沈阳市 移动

                                                  @Kael 这个需要到数据中搜索:SHe_archives,然后把这个表删除

                                                    • avatar Kael 来自天朝的朋友 QQ浏览器 Windows 7 浙江省台州市 电信 7

                                                      @知更鸟 感谢鸟哥指点!

                                                  • avatar 科学上网www.jubushoushen.com 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省宜昌市 移动 4

                                                    感谢鸟哥分享 wordpress有问题总来这里看

                                                    • avatar http://www.btsoso.org/ 来自天朝的朋友 火狐浏览器 Windows 7 广东省清远市 电信 1

                                                      http://www.btsoso.org/ 换友联吗

                                                      • avatar 寂寞猫 来自天朝的朋友 谷歌浏览器 Windows 7 黑龙江省牡丹江市 电信 0

                                                        鸟哥,请问 文章页面下的 赞按钮 分享按钮 (喜欢按钮) 这个是怎么做的啊 非常好看 可以分享一下吗?

                                                        • avatar 脑精网 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省邵阳市 电信 3

                                                          鸟哥,还欠一个代码前后的对比图,我这不懂的还想不出会是个什么效果。

                                                          • avatar 申宝玉 来自天朝的朋友 火狐浏览器 Windows 8.1 重庆市 电信 1

                                                            已经用上了,谢谢鸟哥!

                                                            • avatar 三子博客 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动 0

                                                              鸟哥的主题一如既往的棒。顶一个!

                                                              • avatar نما Iran (ISLAMIC Republic Of) 火狐浏览器 Windows 7 伊朗 1

                                                                顶一个

                                                                • avatar 晏国文 来自天朝的朋友 火狐浏览器 Windows 7 江苏省南京市 电信 1

                                                                  我想问下,为什么你这里用户留言之后点击用户名,不会进行跳转呢?我的网站也不会,我是小白,想问下,谢谢哈

                                                                    • avatar boke123导航 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信 5

                                                                      @晏国文 好像是鸟哥取消了评论者的网址链接,这个很容易实现的

                                                                    • avatar 禅拳咏春 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信 0

                                                                      呵呵,我的站也弄好了,鸟哥的主题,超爽的~

                                                                      • avatar 我是卖家论坛---虚拟卡密自动发货交易平台 来自天朝的朋友 谷歌浏览器 Windows 7 广东省揭阳市 联通 0

                                                                        鸟哥的主题一如既往的棒。顶一个!
                                                                        http://www.wsmj.top
                                                                        积分商城 交易商城 淘宝小号 实名支付宝 安全小号 1心小号 各种小号 各种软件交易 卖家平台 成为卖家 交易中心 交易商城 卖家中心 网上卖东西 卖小号 卖游戏 淘宝小号 交易商城 卖家中心 网上卖东西 卖小号 卖游戏小号 淘宝小号 虚拟交易中心 小号交易 淘宝小号 实名支付宝 安全小号 1心小号 各种小号 各种软件交易 卖家平台 成为卖家 交易中心 小号商城

                                                                        • avatar 黃喬伊 来自天朝的朋友 谷歌浏览器 Mac OS X 10_9_5 上海市 电信 0

                                                                          第一次使用鳥哥的模板,果然很讚

                                                                          • avatar 美Win网 来自天朝的朋友 谷歌浏览器 Windows 8.1 江苏省苏州市 电信 4

                                                                            貌似最近好多主题都加如了这个。不过感觉这个图标库还是太少了,比如我想找谷歌的,除了G+,谷歌钱包,一个默认G就没有其他的了

                                                                            • avatar 红包网 来自天朝的朋友 火狐浏览器 Windows 7 广东省阳江市 电信 1

                                                                              这插件不错,使用字体图标的灵活性大了许多。

                                                                              • avatar 海沧二手房 来自天朝的朋友 谷歌浏览器 Windows 8.1 福建省龙岩市 移动 2

                                                                                学习了!!!

                                                                                • avatar 蒙古签证 来自天朝的朋友 谷歌浏览器 Windows XP 北京市 联通 3

                                                                                  学习了 支持你

                                                                                  • avatar 交通律师 来自天朝的朋友 搜狗浏览器 Windows 7 广东省深圳市 移动 4

                                                                                    请问博主能不能不装插件,就可以直接用图标呢?

                                                                                    • avatar 慕梓阁 来自天朝的朋友 火狐浏览器 Windows 7 江苏省南京市 电信 0

                                                                                      鸟哥,请教个问题 。网站已加载图标字体的话,比如说 我想在 single 模板的 h2标签前统一加一个awesome图标 这个是该写在css里吗?怎么写呢??

                                                                                        • avatar 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows 7 辽宁省 移动

                                                                                          @慕梓阁 一般只需要将类似的图标代码加到single 模板相应位置就可以了
                                                                                          样式控制选择器是 .fa-home

                                                                                        • avatar 行者无疆 来自天朝的朋友 谷歌浏览器 Windows XP 山东省菏泽市 电信 1

                                                                                          鸟哥,我按照你的方法把导航栏的前面添加了字图,但是公告位置不知道在哪儿替换,找了好久都找不到,帮解答一下,谢谢了

                                                                                          • avatar 阿脑纯纯 来自天朝的朋友 谷歌浏览器 Windows 7 广东省汕头市 移动 1

                                                                                            鸟哥!菜单那边有CSS可填入!像页尾比如你的怎么在页面标题前面加图标啊!我找了好久找不到!能否告知具体的方法。

                                                                                            • avatar 来自天朝的朋友 Safari浏览器  Android 4.4.4 2014812 Build/KTU84P 河南省 电信 0

                                                                                              很强大

                                                                                              • avatar 小斌 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 阿里云BGP数据中心 1

                                                                                                很好,很棒
                                                                                                前端菜鸟:http://www.bird100.cn/

                                                                                                • avatar 励志你博客 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 阿里云BGP数据中心 1

                                                                                                  那个主题购买那是怎么弄的呢?
                                                                                                  需要修改菜单吗?
                                                                                                  有没有人知道?

                                                                                                • 来自外部的引用: 5

                                                                                                  • Begin主题常见问题 | 知更鸟
                                                                                                  • 给wordpress博客的导航菜单添加个性图标或字体_wordpress-
                                                                                                  • 如何为导航菜单添加个性图标字体WordPress 畏知网|NEART.cn | 畏知网|NEART.cn
                                                                                                  • 为导航菜单添加个性图标字体 – 微ye
                                                                                                  • Begin主题使用说明 | KOTY