使用的组件
- 图标官网 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>
评论区