添加菜单动态图标

发布于 2022-03-15  689 次阅读


本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

由于Sakura主题已经引用了 Fontawesome 所以直接 后台-外观-修改菜单 即可,找到你想要的图标参考如下填写

打开 Font Awesome中文网 http://www.fontawesome.com.cn/faicons/

选取你喜欢的图案点击进入,复制代码!例子:

fa-address-book,但是在应用时,所有图标前面都要需要添加多一个fa 得出fa fa-address-book

<i class="fa fa-address-book"></i> 文字
文字 <-===演示

然后保存之后,刷新面页就能看到图标了。 (为什么不一样不会动呢?)

现在,我们来添加一个会动的图标!

1,我们需要用到这个网站Font Awesome Animation,然后还需要在头部引用一个CSS【Sakura跟iro 主题之前自带,现在不知道,自己测试】

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

2,先来个举个例子:

<i class="fa fa-fort-awesome faa-wrench animated-hover"></i> 首页
首页 <-===正常

然后来分解一下代码的应用 fa fa-fort-awesome 就是图标 http://www.fontawesome.com.cn/faicons/

faa-wrench 就是动画效果 可以参考这里 至于最后的 animated-hover 就是指向它才会动,

animated 则表示 自己动,然后还可以再后面添加 faa-fastfaa-slow 则表示 慢,不添加则正常。

<i class="fa fa-fort-awesome faa-wrench animated-hover faa-fast"></i> 快的表现 
快的表现
<i class="fa fa-fort-awesome faa-wrench animated-hover faa-slow "></i> 慢的表现
慢的表现

然后复制去菜单中 保存即可。