如何在菜单旁添加会动的小图标

Sakura主题美化系列（一）如何在菜单旁添加会动的小图标 | Ukenn Blog

照搬大佬的教程

 

 

 

• 编辑菜单

先到网站后台，进入菜单处

添加现有的页面、分类等项目

编辑导航标签，如我的首页就是——

<span class="faa-parent animated-hover"><i class="fa fa-ship faa-pulse"></i> 摆渡大厅</span>

保存返回主页，就可以看到已经生效了。

• 修改分析

 

大多的主题都支持 Font Awesome，所以我们来到Font Awesome中文网&Font Awesome Animation两个网站

先来到Font Awesome中文网，选一个喜欢的图标

 

 

注意：此动画似乎只支持“fa”开头的图标，即fa fa-automobile类型的板式。如今Font Awesome已经来到v6的版本，该类图标逐渐停止更新。建议使用旧版本v4的图标

这个名称就是上图的图标部分引用的名字，修改对应的图标名称就会显示对应的图标

然后再到Font Awesome Animation这里，选择图标动画——

网站里还有相关说明，调整快慢、旋转都有，现在只需要把左边那列的动画名称，填到代码图的对应位置，就能使图标做出相应的动画了。

 

 

如网页并未引用Font Awesome和Font Awesome animation，则需要在主题头文件引用 font-awesome.css

可以在对应的网站下载他们的项目放在你的项目里，在head中引用

Font Awesome

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
路径需要自行修改

Font Awesome Animation

<link rel="stylesheet" href="/path/to/font-awesome-animation.min.css" rel="stylesheet">
路径需要自行修改，最后的文件名不变