前言

本人是纯正的电脑小白。大都是Google搜索或结合自己的反复试错精神,肯定有不周到之处。若有不详细或不对之处请在评论区指出。接下来让我们在单调的文字菜单栏添加好看的图标吧!

一、安装Font Awesome

(注:sakura主题自带font awesome直接跳到第二步)
Font awesome是一套绝佳的图标字体库和CSS框架。
Font awesome
官网:https://fontawesome.com/
国内网址:http://www.fontawesome.com.cn/
1.复制font-awesome目录到你的项目中
2.在<head>处加载font-awesome.min.css如下。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

二、使用Font Awesome

1.基础图标添加

首先当然是进入菜单

查找图标名称及其代码:国内的就进入Fontawesome 中文网

保存菜单即可显示

其他图标也是如此
如果菜单保存了未显示可能是导航菜单未勾选

2.动态图标添加

了解动态图标的添加可以进入font-awesome-animation
这个网站可以了解如何添加动态图标的代码
一般wp主题可能未引入,需要手动引入css。(我用的是大佬所做的 wp Sakura主题已经引入了所以不需要了

动态效果有以下画框框的三种
每种下面都是所需要的动态效果名称。

然后找到你所需要的图标名称和动态效果名称
进入外观-菜单里面
然后同样的也是在导航标签填入下列代码

span class="faa-parent animated-hover"><i class="fa fa fa-pencil-square-o  faa-wrench"></i> 留言板</span>

保存菜单即可,这样你就拥有动态的图标啦!