image - 字体真棒图像叠加

Question

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

Answer 1

我使用 font-awesome将一个快速的 JSfiddle放在一起。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