字体真棒图像覆盖(Font Awesome Image Overlay)

我目前正在创建一个图片库（使用Zurb基金会框架），并想显示（这里就像这个例子：图像悬停缩放图标http://codepen.io/Twikito/pen/Jeaub ）。 但我想的图标是一个字体（字体真棒）图标，而不是一个而是三个独立的可点击的图标..请问这可能吗？

Answer 1:

我已经把一个快速的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使用字体awesome.css从外部调用bootstrapcdn.com

文章来源: Font Awesome Image Overlay