forum admin
Me

JANE DOE

JANE DOE

PHOTOGRAPHER

Ana Sayfa Forum Site Ekle
Blog Forum Site Ekle

cokcop ücretsiz dizin ve hit

Font Awesom icon ekleme (kolay yöntem)

Font Awesom Nedir?

Web Sitelerde kullanılan iconlarin sıklığı ve ihtiyaç oranı yüksek olmasından kaynaklı gelistirilen (.gif, .PNG veya .co) gibi kaynak belirtmeyen kısa kodlu font görevi gören görsel şekiller. Font Awesom şuan birçok yeni nesil tasarimlarda ve responsive temalarda kullanılmaktadır. Açık kaynaklı olarak bu fonların nasıl kullanildigi ve kısa kodlarının paylaşıldığı bircok site mevcut. Aklı karışmış ve fonların çalışma şeklini halen cozemeyen arkadaslarimiz için oldukca basit ve kisa birkaç kod ile bu fontları nasıl kullanacaklarını anlatayım.

Kodların çağırılma linki (bootstrap veya bootsnip)

Bu gelişmiş iki web sitede java, HTML, PNP ve css gibi bircok çalışma ve geliştirme bazli kod paylasimi bulabilirsiniz. Font Awesom kısa kodların cagrildigi sprint kodunu bu web sitelerinden birinden(ben bootsnip'i kullandım) alıyoruz. Siz zahmet etmeden ben alt kısımda paylaştım. Bu kodu tasarım veya temanizda ctrl-F yaparak sprint kelimesini arayın, bulduğunuz sonucun en üst kismina kopyalayıp yapistirin. Genelde tasarimlarinizda en üst sırada yer alıyor. Bu birinci adimimiz.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />

Çalışma şekli

Aslında oldukça basit bir isleyisi var. CSS ile adı cagirarak font'un ön veya arka kısımda şekil, uzaklik, büyüklüğünü belirtme. Bunlari CSS ile  belirtip isim vereceksiniz. Örnek verecek olursak Ana sayfa için belirttiğimiz font'un ismini fa fa home diyelim. Kullandığımız fa fa eki CSS bölümünde kolaylık sağlaması için kullaniyoruz. Her font için durum; yani arka plan, renk veya büyüklüğünü tekrar yazmamak icin. İsteğe bağlı olarak bunları fa fa home css kısmında da özellikle belirterek değişiklik yapabiliriz. Şimdi alt kısımda verilen CSS kodu CSS bolumunde bulunan kodlara ekleyin.

CSS kodu
fa fa {     font: normal normal normal 24px/1 FontAwesome;
    color: #ffb74e;    content: "\f191";}
CSS kodu
fa fa-home i:before{
    color: #fff;
    padding: 12px;
    content: "\f071";
    font: normal normal normal 19px/1 FontAwesome;
}
HTML kodu
<a href="/" data-kdripplefixed=""><i class="fa fa-home" aria-hidden="true"></i>Ana Sayfa</a>

Görünüm ve kullanımı

Yaptığımız degisiklik Awesom iconlarin font ve content kısımlarını farklı seçenekler vererek görüntü sağlamasını yapiyoruz. Bu kodlar üzerinde yazı font'un sadece sayı bölümlerinden size yani büyüklüğünü belirliyoruz. Temaniz üzerinden yaptığımız Awesom iconlarin kullanımı ve uygulaması alt kısımda verdiğimiz fa fa home için görüntüsü verilmiştir. Uyguladığınız takdirde sizde bu iconları bu şekilde rahatlikla kullanabileceğiniz. 
Örnekgörünüm
Ana Sayfa
Abonemiz olmaya ne dersiniz? cokcop.tr.gg deki gazeteye abone olmak istiyorum
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=