WordPress导航菜单使用的CSS小图标是如何实现的？基于Font Awesome的小图标，效果如下图所示：

本文介绍基于Font Awesome的小图标，从此告别png小图片。

一：引用Font Awesome

1、首先下载Font Awesome
2、下载后解压，将“css”和“font”这两个文件夹上传到网站的同一个目录下，哪个目录自己定，要放在同一目录下；
3、在网页中引用“font-awesome.min.css” 注意：路径正确。

二：WordPress菜单导航调用小图标

1、登录WordPress后台；
2、选择“外观”—“菜单”；
3、如下图所示，在导航标签中输入“首页”或在CSS类中添加“fa fa-home”下图：

三：图标样式参考选择

图标样式参考：在WordPress后台标签中引用即可。

Font Awesome的优势：

1、支持自适应；
2、可以使用字体的各种特性（比如变色、变大变小、字体阴影等）；
3、减少数据加载,可以提高页面的加载速度；
4、样式更容易定义等；
5、一个字体文件，369 个图标，一直在更新，现在应该更多了；
6、不需要javascript要求；
7、无限的可扩展性：可伸缩矢量图形意味着每一个图标在任何大小看起来真棒.SVG技术.
8、自由免费：你可以将它应用到你的商业中。
9、完美的视网膜显示：使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中
10、为BootStrap而生：完全的兼容BootStrap新版3.0