字体图标（Font Awesome）图像叠加

Question

我正在创建一个图片库（使用Zurb Foundation作为框架），希望在图片悬停时显示缩放图标（像这个例子一样：http://codepen.io/Twikito/pen/Jeaub）。但是我想让图标成为一个字体（Font Awesome）图标，不仅如此，还希望有3个独立的可点击图标...这是否可能？

- Paranoia

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

- nickhar