WordPress菜单栏添加图标

前置条件

1. 在主题头文件引用 font-awesome.css ，<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
2. 或使用 Argon、Sakura、Sakurairo 等自带 Fontawesome 资源的主题

静态图标

直接 后台-外观-修改菜单 ，找到你想要的图标参考以及要添加图标的选项如下填写内容 <i class="fa fa-fort-awesome"></i> 首页

动态图标

1. 我们需要用到这个网站Font Awesome Animation，然后还需要在头部引用一个 CSS【Sakura 主题同样自带，此步跳过】

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css">

然后找到你要的图标和想要的动画，继续修改 后台-外观-菜单，全部填到标题里

<span class="faa-parent animated-hover"><i class="fa fa-fort-awesome faa-horizontal"></i> 首页</span>

如果没有效果，换个图标和动画试试哦！

常见图标动效：

• faa-horizontal：对应水平摇动
• faa-vertical： 垂直摇动
• faa-shake： 颤动
• faa-tad： 缩小放大效果

常见的图标网站

• FontAwesome 字体图标中文Icon
• Font Awesome,奥森图标

上面两个基本上够用，何况咱们还有copy大招，看上谁的，F12解决（右键检查）

参考

1. WordPress菜单栏动态图标-通用图形图标设置方法 - 知乎 (zhihu.com)