2013-03-06 23 views
7

Şu anda bir resim galerisi oluşturuyorum (Resim olarak Zurb Foundation'i kullanarak) ve resmin yakınlaştırma/zoom oranını göstermek istiyorum (bu örnekteki gibi: http://codepen.io/Twikito/pen/Jeaub). Ancak ikonun bir yazı tipi (Font Awesome) simgesi olmasını ve sadece bir tane de 3 ayrı tıklanabilir ikon olmasını istemiyorum. Bu mümkün mü?Font Awesome Image Overlay

cevap

22

Mümkün!

Yazı tipi-harika kullanarak birlikte bir quick JSfiddle koydum. CSS birbirine saldırıldı ancak neyin mümkün olduğunu gösterir. Denemek için size bir başlangıç ​​noktası vermelisiniz.

<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> 

Not: JSfiddle yukarıda bootstrapcdn.com

harici olarak adlandırılan yazı-awesome.css kullanır
İlgili konular