让博客有动态的菜单图标

使用的组件

图标官网 fontawesome
动态图标font-awesome-animation

使用方法

这里只说简单的使用, 其他的效果自己研究吧

引入css.
找到专门放css的文件, 实在找不到, 可以全局搜下jquery放在哪个文件中. 也可以先看看自己的博客是否默认自带了这些css

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
        <#--增加动态图标支持-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation/dist/font-awesome-animation.min.css">

在菜单的标签中加class
不知道菜单是哪个文件的话, 也可以全局搜下navigation.
父级标签的class加faa-parent和animated-hover. 这两个是动态图标的, 具体看 https://l-lin.github.io/font-awesome-animation/ 的解释, faa-parent表示这个标签下的子标签有效, animated就是一直在动, animated-hover就是鼠标放上去会动, 还可以用faa-fast和faa-slow来控制快慢.
然后就是子标签中, 单独用个标签和菜单文字区分开, 否则会菜单文字一起跟着摇动. 标签也是在class上加, fa fa-address-card 则是图标样式的, 可以 http://www.fontawesome.com.cn/faicons/ 在这里选个自己喜欢的.faa-shake则又是动态图标的, 表示怎么动, 又不同的晃动方式, 更多的也可以看 https://l-lin.github.io/font-awesome-animation/ 下面

demo:

<li class="item ">
                            <a class="link md:text-base sm:text-sm " href="/links" target="_self">
                                <span class="faa-parent animated-hover">
                                    <i class="fa fa-address-card  faa-shake" aria-hidden="true"></i>
                                    个人链接
                                </span>
                            </a>
                        </li>

让博客有动态的菜单图标

使用的组件

使用方法

评论区