wordpress导航菜单添加CSS图标Font Awesome

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

Font Awesome小图标css效果

Font Awesome小图标css效果


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

一:引用Font Awesome

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

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

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

wordpress菜单设置

wordpress菜单设置

三:图标样式参考选择

图标样式参考:点击查更多图标样式
选择喜欢的图标样式代码,在WordPress后台标签中引用即可。

Font Awesome的优势:

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

注意:购买阿里云服务器特惠活动,可以领取2000元代金券,符合条件的订单可以使用代金券抵扣。