WordPress为导航栏添加个性图标

11,717次阅读
19条评论

共计 373 个字符,预计需要花费 1 分钟才能阅读完成。

WordPress 为导航栏添加个性图标

前言

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

介绍

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

方法

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

WordPress 为导航栏添加个性图标

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

WordPress 为导航栏添加个性图标

后记

如果你添加进行无法使用,可能是你的主题集成这个图标的 LESS 或 CSS,具体的可以参考官方的说明进行添加。
Font Awesome
 

正文完
使用官方微信小程序体验更多功能
post-qrcode
 18
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 2016-03-27发表,共计373字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(19条评论)
ヽ 柒柒 评论达人 LV.1
2020-07-21 09:51:19 回复

多谢博主,mark了

 Windows  Chrome  中国福建省宁德市电信
鸡壳 评论达人 LV.1
2018-07-04 10:46:10 回复

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

 Windows  Chrome  中国河南省郑州市移动
    憧憬Licoy 博主
    2018-07-04 11:41:00 回复

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

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

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

   shanks  中国湖北省武汉市电信
themebetter 评论达人 LV.1
2016-03-29 17:00:22 回复

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

 Windows  Chrome  中国浙江省湖州市电信
bandwagonhost 评论达人 LV.1
2016-03-29 15:31:47 回复

直接用BOOTSCRAP调用。

 Windows  Firefox  中国江苏省南通市电信
boke112导航 评论达人 LV.2
2016-03-28 10:34:00 回复

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

 Windows  Chrome  中国广西南宁市电信
vultr 评论达人 LV.1
2016-03-27 23:47:54 回复

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

 Windows  Chrome  中国浙江省湖州市电信
明月登楼的博客 评论达人 LV.2
2016-03-27 23:41:01 回复

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

 Windows  Chrome  中国浙江省湖州市电信
米粒博客 评论达人 LV.2
2016-03-27 21:45:17 回复

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

 Windows  Chrome  中国上海上海市电信
好文推荐 评论达人 LV.1
2016-03-27 18:11:25 回复

赞一个、不错的说

 Windows  Chrome  中国广东省广州市电信