字体真棒图像叠加

问题描述：

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

答

很可能！

我已将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

外部调用

字体真棒图像叠加

相关推荐