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

WordPresswordpress导航菜单添加CSS图标Font Awesome已关闭评论23

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

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

Font Awesome小图标css效果


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

一:引用Font Awesome

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

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

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

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

wordpress菜单设置

文章源自新手站长-https://xinshouzhanzhang.com/fontawesome.html

三:图标样式参考选择

图标样式参考:在WordPress后台标签中引用即可。文章源自新手站长-https://xinshouzhanzhang.com/fontawesome.html

Font Awesome的优势:

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

【阿里云99元服务器】入口2核2G3M带宽、新老用户同享、99元/年续费到2027年

【腾讯云特价】:2核2G3M 88元一年、2核2G4M 108元1年 366元3年、2核4G5M 166元/年 566元3年、4核8G12M 446元一年 更多配置8核16G18M和16核32G28M 点我直达 >>

2023阿里云优惠活动:xinshouzhanzhang.com/go/aliyun

注意:以上特价轻量服务器限制条件为“产品首单特惠”,如果你的腾讯云账号已经是老用户,建议重新注册一个腾讯云账号,如果你是新用户符合条件,那么无脑入,确实值得。

 
  • Font Awesome
  • WordPress Font Awesome
  • WordPress ico导航