首先在Font Awesome图标库中找到自己想要的图标http://www.fontawesome.com.cn/faicons/

选择想要的动效https://l-lin.github.io/font-awesome-animation/

示例

在父元素悬停时

对于父悬停,请添加 CSS 类,然后在父元素上:faa-parent animated-hover

官方示例

<a href="#" class="faa-parent animated-hover">
  <i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i> hover mouse here
</a>

实际运用

fa fa-home:图标样式

faa-wrench:图标动效

<span class="faa-parent animated-hover"><i class="fa fa-home faa-wrench"></i> Home</span>

长风破浪会有时,直挂云帆济沧海。