Наложение изображения Font Awesome

В настоящее время я создаю галерею изображений (используя Zurb Foundation в качестве платформы) и хотел бы отображать значок масштабирования при наведении на изображение (например, здесь: http://codepen.io/Twikito/pen/Jeub). Но я бы хотел, чтобы значок был значком шрифта (Font Awesome), а не одним, а тремя отдельными значками, на которые можно щелкнуть. Возможно ли это?


image overlay font-awesome zurb-foundation
person Paranoia    schedule 06.03.2013    source источник

Ответы (1)


arrow_upward
22
arrow_downward

Я собрал быстрый 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 используется font-awesome.css, вызываемый извне с bootstrapcdn.com.

person nickhar    schedule 22.03.2013