字體真棒圖像疊加

Question

我目前正在創建一個圖像庫（使用Zurb基金會作爲框架），並希望在圖像懸停上顯示縮放圖標（如此示例在這裏：http://codepen.io/Twikito/pen/Jeaub）。但我想這個圖標是一個字體（Font Awesome）圖標，而不僅僅是一個，而是三個單獨的可點擊的圖標..這可能嗎？

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使用字體awesome.css從bootstrapcdn.com

外部調用