Güncellenme Tarihi : 13 Haziran 2013 İcon set : 3.2.0
Merhaba arkadaşlar,
Öncelikle bu hizmeti bize sunan arkadaş 27″ lik iMac alacakmış ve yardımlarımızı bekliyor, miktarın büyüğü küçüğü olmaz 1 dolarda olsa göndermenizi rica ederim. ( Destek )
Font Awesome nedir ?
Font Avesome günümüz web sitelerinde çok sık kullanılan iconlardan oluşturulmuş bir fontdur.
Font Awesome nasıl kullanılır ?
Bu iconları web sayfamıza eklemek için 2 işlem yapmalıyız.
1 – “fontAwesome.css” css dosyasını web sitemize eklemek. Burada belirtmek isterim ki css kullanmayanlar için less (Less nedir? nasıl kullanılır ?) veya sass (Sass nedir?) versiyonlarıda mevcuttur.
2 – fontAwesome.css dosyasındaki @font-face olarak belirttiğimiz fontların konumlarını ayarlamak.
Font Awesome için teknik bilgiler
1- İconların boylarını büyütmek istiyorsanız yapmanız gereken tek şey i tagına önceden tanımlanmış boy class’ları eklemek. Önceden tanımlanmış boylar (icon-large, icon-2x, icon-3x, icon-4x)
|
1 |
<i class="icon-cloud-download icon-large"></i> |
2- İconlara animasyon vermek için yapmanız gereken tek şey i tagına “icon-spin” classını eklemek. Bu özellik ie7,ie8,ie9 tarayıcılarında çalışmamaktadır.
|
1 |
<i class="icon-cloud-download icon-spin"></i> |
3 – İcon’a border vermek için
|
1 |
<i class="icon-cloud-download icon-border"></i> |
Sizlere bir nebze koylaylık olsun diye aşağıda ki ön izleme linkinde Font Awesome’ı gereksiz şeylerden arındırarak bütün iconların isimlerini belirtim.
1 – Font-Awesome – http://fortawesome.github.com/Font-Awesome/
2 – Sass nedir – http://www.gelistiricigunlugu.com/sass-nedir/
Güzel kaynak oldu teşekkürler.
Yararlı konu. Tasarımcıların daha çok okuması gerekir. 100 tane iconu ayrı ayrı yapmışlığımı bilirim.
Teşekkürler. Faydalı bir konu olmuş elinize sağlık.
Faydalı Bir Yazı Olmuş. Elinize Sağlık…
çok yararlı bir paylaşım.Web masterların bu konuya önem vermesi gerekir. User interface bakımında kullanıcıya yol gösterecek bir yöntem.Teşekkürler
öncelikle makale için teşekkürler.
icona renk vermek için ne yapmamız gerektiğinden bahsedebilir misiniz? örneğin benim siyah veya beyaz renkli iconlarım var. ben bordo veya maviye dönüştürmek istiyorum. bunu direk css fontlarını kullanarak yapmanın yolu var mı?
teşekkürler.
color ile istediğiniz rengi verebilirsiniz.
örnek : .icon-cog:before{color:red;}
cevap için teşekkürler. peki bu renk verme sadece beyaz renge has bir durum mu yoksa değişik renkteki iconlara verebilir miyiz?
ne demek istediğinizi anlayamadım ?
default rengi beyaz olana bordo veya mavi renk atayıp o şekilde gösterdiğimiz gibi defaulr rengi siyah olana da aynı şeyi yapabiliyor muyuz?
merhaba, öncelikle yaptığınız yararlı paylaşımlar için teşekkür ediyorum. Şimdi; tüm iconlarında font awesome kullanılan bir tema var elimde. tema html ve css kullanılarak yazılmış. localde ve sunucuda gayet normal çalışıyor ancak; html kodlarını aspx uzantılı sayfalara gömünce iconlar css’de geçtiği gibi (f0ac) gözüküyor. localde bir sıkıntı yok ama sunucuya atınca hata veriyor. bunun sebebi ne olabilir?
Fonta TL simgesi eklenmesi için de GitHub’da bir istek oluşturulmuş. Enazından +1 yazarak destekleyebilirsiniz.
https://github.com/FortAwesome/Font-Awesome/issues/1159
Merhaba Projemde Font Awesome kullandım localde bir sıkıntım yok tüm iconlar çalışıyor ve geliyor, fakat servera attıktantan sonra projemdeki iconlar gelmiyor. yardımcı olursanız sevinirim…
Merhaba, css dosyasınında font dosyalarını çağırırken buyuk küçük harf kullanımına dikkat etmelisiniz.