Nakładka na zdjęcia niesamowite czcionki

Question

Obecnie tworzę galerię obrazów (używając Zurb Foundation as Framework) i chciałbym pokazać ikonę powiększenia na ikonie obrazu (jak w tym przykładzie tutaj: http://codepen.io/Twikito/pen/Jeaub). Ale chciałbym, aby ikona była ikoną czcionki (Font Awesome), a nie tylko jedną, ale trzema ikonami, które można kliknąć. Czy to byłoby możliwe?

Answer 1

Bardzo możliwe!

Połączyłem quick JSfiddle razem, używając font-awesome. CSS został zhakowany razem, ale pokazuje, co jest możliwe. Powinien dać ci punkt wyjścia do eksperymentowania.

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

Uwaga: JSfiddle powyżej wykorzystuje font-awesome.css nazwie zewnętrznie od bootstrapcdn.com