WordPress为导航栏添加个性图标

10,713次阅读
19条评论

WordPress

前言

博客的导航前面没有一点儿的装饰是不是很枯燥,一栏的文字让用户或读者看着也有点心烦,为自己的博客导航栏加上个性的图标可以使页面更加人性化,从而使得不再枯燥单一。

介绍

Font Awesome 是为 Twitter Bootstrap 设计的图标字体。通过 Web Font 的方式来显示一些图标,好处是图标可以被任意缩放、改变颜色,你需要做的只是像修改文字样式那样修改图标样式。

方法

首先进入 fontawesome.io,然后在里面找到你想要的图标,然后单击进入,然后复制 <i> 标签的代码。

WordPress

接着进入你的后台,在外观 -> 菜单里面找到你要进行添加的菜单,然后在导航标签的文字前面加入刚才那一段 <i> 标签代码,然后保存,刷新一下即可看到。

WordPress

后记

如果你添加进行无法使用,可能是你的主题集成这个图标的 LESS 或 CSS,具体的可以参考官方的说明进行添加。
[dm href=’http://www.bootcss.com/p/font-awesome/’]Font Awesome, 为 Bootstrap 而创造的图标字体 [/dm]
 

18
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 2016-03-27发表,共计446字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(19条评论)
验证码
载入中...
ヽ 柒柒 评论达人 LV.1
2020-07-21 09:51:19 回复

多谢博主,mark了

WindowsWindowsChromeChrome84.0.4147.89
鸡壳 评论达人 LV.1
2018-07-04 10:46:10 回复

请问你的内个红色标题是怎么实现的?

WindowsWindowsChromeChrome67.0.3396.99
    憧憬Licoy 博主
    2018-07-04 11:41:00 回复

    @鸡壳 添加个class 然后设置这个class的样式为color:red即可

    WindowsWindowsChromeChrome67.0.3396.87
Koolight 评论达人 LV.3
2016-05-16 16:08:07 回复

后来的一些主题上都集成了这个图标了。

shanksshanks0.5.14
themebetter 评论达人 LV.1
2016-03-29 17:00:22 回复

图标可以为网站增色,还是要得。

WindowsWindowsChromeChrome46.0.2490.71
bandwagonhost 评论达人 LV.1
2016-03-29 15:31:47 回复

直接用BOOTSCRAP调用。

WindowsWindowsFirefoxFirefox45.0
boke112导航 评论达人 LV.2
2016-03-28 10:34:00 回复

我也是直接安装这个插件来添加,感觉很方便

WindowsWindowsChromeChrome45.0.2454.101
vultr 评论达人 LV.1
2016-03-27 23:47:54 回复

试验了下,简单好用,楼主好人,谢谢分享

WindowsWindowsChromeChrome45.0.2454.101
明月登楼的博客 评论达人 LV.2
2016-03-27 23:41:01 回复

不错,这两个网址我收藏了先!感谢分享!

WindowsWindowsChromeChrome49.0.2623.87
米粒博客 评论达人 LV.2
2016-03-27 21:45:17 回复

才搞了两个图标 其它的没时间弄

WindowsWindowsChromeChrome45.0.2454.101
好文推荐 评论达人 LV.1
2016-03-27 18:11:25 回复

赞一个、不错的说

WindowsWindowsChromeChrome31.0.1650.63