WordPress为导航栏添加个性图标

WordPress为导航栏添加个性图标

前言

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

介绍

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

方法

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

WordPress为导航栏添加个性图标

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

WordPress为导航栏添加个性图标

后记

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

    A+
所属分类:WordPress

发表评论

请在下方填写评论信息

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

表情 粗体 斜体 图片 引用 链接 删除线 下划线 插代码 签到

目前评论:18   其中:访客  17   博主  1

  1. avatar 鸡壳 0  来自天朝的朋友 谷歌浏览器 Windows 7 河南省 移动

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

    • avatar 憧憬Licoy 博主  来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市成华区 电信

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

  2. avatar Koolight 5  来自天朝的朋友 未知浏览器 Unknow Os 湖北省武汉市 电信

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

  3. avatar themebetter 2  来自天朝的朋友 谷歌浏览器 Windows 8.1 浙江省台州市 电信

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

  4. avatar bandwagonhost 0  来自天朝的朋友 火狐浏览器 Windows 10 江苏省南通市 电信

    直接用BOOTSCRAP调用。

  5. avatar boke112导航 4  来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市

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

  6. avatar vultr 1  来自天朝的朋友 谷歌浏览器 Windows 7 浙江省台州市 电信

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

  7. avatar 明月登楼的博客 4  来自天朝的朋友 谷歌浏览器 Windows 10 浙江省台州市 电信

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

  8. avatar 米粒博客 4  来自天朝的朋友 谷歌浏览器 Windows 10 上海市 电信

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

  9. avatar 好文推荐 3  来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信

    赞一个、不错的说