Ş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
7
A
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
- 1. Building font-awesome icons
- 2. ng-disabled, font-awesome
- 3. Font-Awesome Yazı tipleri nasıl ölçeklenir?
- 4. C# dosya uzantısına font-awesome class
- 5. JS kullanarak Font Awesome simgeleri nasıl canlandırılır?
- 6. Mailchimp kampanyasında Font Awesome simgelerini kullanma
- 7. Font Awesome 5 Bundle via NPM
- 8. Express: Statik içerik olarak font-awesome nasıl sunulur?
- 9. font awesome animasyonlu bir arka plana sahip spinner
- 10. Font-Awesome EnableOptimizations Paketleme Başarısız Olma İsteği Başarısız Ol
- 11. Font-Awesome - icon-spin gizlendiğinde dönmez ve sonra
- 12. XML seçicisinde yazı tipi simgesi (font-awesome) nasıl kullanılır
- 13. Font-awesome svg simgelerini base64 url olarak nasıl dışa aktarılır?
- 14. Phonegap overlay image for Android kamera önizleme görüntü kalitesi
- 15. Overlay Videodan oynat düğmesi
- 16. image inputfield içinde gösterilmiyor
- 17. Yazıyüzüne araç ipucu ekle awesome icon
- 18. yii2 Html :: simge öneki Bağımlılık Enjeksiyon Kabıyla font-awesome 'fa fa' olarak nasıl ayarlanır?
- 19. Kırpma Image Image
- 20. PHP image cropping image
- 21. Android Uygulaması: image image
- 22. font font fontlarını önbelleğe alma
- 23. font-müthiş kullanarak tepki-oluştur-app
- 24. @ font-face adresindeki Webpack hatası
- 25. Android color overlay - PorterDuff modları
- 26. Swift UIActivityViewController Image Share çalışmıyor
- 27. Base64 Font için Tumblr üzerinde Font Kodlama
- 28. piksel font
- 29. 2d silah sprite karakter sprite üzerinde Overlay?
- 30. Overlay Şeffaf GLSurfaceview android mevcut görünümüne?