html - 使用带有自定义字体的 Font Awesome 动画

Question

我正在尝试使用来自 font awesome 的 tada 动画使用我从 fontastic 生成的自定义字体.我添加了 font-awesome-animation.min.css到我的 WordPress 主题文件的标题。我还将此 html 代码添加到我的 site (见成员(member)图标)。

<a class="faa-parent animated-hover" href="#">
  <div class="service-icon-container">
    <div class="fa icon icon-membership faa-tada"></div>
  </div>
  <h3>Membership</h3>
  <p>Membership info text</p>
  </a>

有什么让它发挥作用的建议吗？

Answer 1

您忘记在 css 中更改悬停类的引用。

为您的成员(member)图标尝试添加以下代码:

a.faa-parent:hover .service-icon-container > .fa.icon {
-webkit-animation: tada 2s linear infinite;
animation: tada 2s linear infinite;}

对于所有其他图标，添加您为成员(member)添加的 anchor 标记。