image - Font Awesome 图像叠加

Question

我目前正在创建一个图片库(使用 Zurb Foundation 作为框架)并希望在图像悬停时显示缩放图标(例如这里的示例:http://codepen.io/Twikito/pen/Jeaub)。但我希望图标是一个字体(Font Awesome)图标，而不是一个而是 3 个单独的可点击图标..这可能吗？

Answer 1

我放了一个 quick JSfiddle一起使用 font-awesome。 CSS 被破解了，但展示了什么是可能的。它应该为您提供一个尝试的起点。

<a href="#" title="" class="image">
  <img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>

<div class="cn">
   <div class="inner">
      <a href="#zoom"><i class="icon-zoom-in large"></i></a>
      <a href="#download"><i class="icon-cloud-download large"></i></a>
      <a href="#comment"><i class="icon-comment large"></i></a>  
   </div>
</div>

注意:上面的 JSfiddle 使用了从 bootstrapcdn.com 外部调用的 font-awesome.css