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

2015年3月31日12:42:38 52 25,353

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

具体方法:

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

二、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经验与技巧,关注前端设计与网站制作。仅用于功能演示。

发表评论

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

目前评论:52   其中:访客  44   博主  3   引用   5

    • 图纸加密软件 图纸加密软件 0

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

      • 懿古今 懿古今 2

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

        • hanbing17 hanbing17 2

          好看了很多

          • 散文精选 散文精选 6

            学习了 不错的方法

            • 两天 两天 6

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

              • 海蓝辰风 海蓝辰风 2

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

                • 海蓝辰风 海蓝辰风 2

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

                    • 009 009 5

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

                        • 海蓝辰风 海蓝辰风 2

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

                      • 鲜活 鲜活 3

                        wordpress玩到极致了

                        • 它季 它季 2

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

                          • 冰镇椰子汁 冰镇椰子汁 2

                            Ality主题不更新了?

                            • vps推荐 vps推荐 0

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

                              • 看起来不错 看起来不错 0

                                博主对wordpress非常了解啊!

                                • jacksuc jacksuc 7

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

                                  • 点滴生活博客 点滴生活博客 1

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

                                    • 灰常记忆 灰常记忆 4

                                      等我买了,再试试。

                                      • 眼幕微启 眼幕微启 5

                                        非常不错的功能

                                        • 励志小兴 励志小兴 2

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

                                          • Kael Kael 7

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

                                              • 知更鸟 知更鸟 Admin

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

                                              • 寂寞猫 寂寞猫 0

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

                                                • 脑精网 脑精网 3

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

                                                  • 申宝玉 申宝玉 1

                                                    已经用上了,谢谢鸟哥!

                                                    • 三子博客 三子博客 0

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

                                                      • نما نما 1

                                                        顶一个

                                                        • 晏国文 晏国文 1

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

                                                            • boke123导航 boke123导航 5

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

                                                            • 禅拳咏春 禅拳咏春 0

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

                                                              • 黃喬伊 黃喬伊 0

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

                                                                • 美Win网 美Win网 4

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

                                                                  • 红包网 红包网 1

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

                                                                    • 海沧二手房 海沧二手房 2

                                                                      学习了!!!

                                                                      • 蒙古签证 蒙古签证 3

                                                                        学习了 支持你

                                                                        • 交通律师 交通律师 4

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

                                                                          • 慕梓阁 慕梓阁 1

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

                                                                              • 知更鸟 知更鸟 Admin

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

                                                                              • 行者无疆 行者无疆 1

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

                                                                                • 阿脑纯纯 阿脑纯纯 1

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

                                                                                  • 。 0

                                                                                    很强大

                                                                                    • 励志你博客 励志你博客 1

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

                                                                                      • 皮皮豪 皮皮豪 1

                                                                                        感觉没有效果

                                                                                        • 皮皮豪 皮皮豪 1

                                                                                          还是需要安装插件才可以

                                                                                        • 来自外部的引用: 5

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