11 Ekim 2014 Cumartesi

Font Awesome Nedir? Nasıl Kullanılır


     Font Awesome Web siteleri ve Blog sitelerinde yazıların içerisinde veya ana sayfalarda oluşturulan menülere küçük simgeler ekleyerek daha belirgin ilgi çekici özellik sağlayan bir ücretsiz fonttur.Font Awesome kullanımı oldukça basittir,eğer Blogger siteniz varsa ve kısa süreli aralıklarda şablon değişikliği yapıyorsanız bu font belirli zaman sonra düzgün çalışmayabilir bunu unutmamak gerekir.

     Web sitelerinde yazılan makalelerde de görmüş olduğunuz kadarı ile Font Awesome kullanılarak küçük iconlarla sitenizi şenlendirmek isterseniz yapılacak işlemleri aşağıdan takip ederek sahip olabilirsiniz.

Font Awesome Kurulumu :

1. Font Awesome Blogger sitelerinde çalışabilmesi için önce blog sitenize Font Awesome javascript kodunu ekleminiz gerekmektedir.Bu işlemi yapmak için Kumanda Paneli/Şablon/HTML Düzenle yolunu izliyoruz.
2. Daha sonra CTRL+F tuşları ile <head> kodunu aratıyoruz.
3. Bulmuş olduğunuz <head> kodunun hemen altına aşağıda ki kodu ekleyerek şablonu kaydedip çıkın.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet">
4. Bu işlem bittik den sonra artık Blog sitenizde yazılarınız içerisine istediğiniz simgeyi ekleyebilirsiniz.

Font Awesome Kullanımı:

Font Awesome Blog sitenizde kullanabilmek için önce bir kod kalıbına ihtiyacımız var.Şimdi yapılacak olan adımlar sırası ile aşağıdan takip ederek uygulayın.

1. Öncelikle yazılarımızın içerisinde Font Awesome iconlarını kullanabilmek ve çalışması için bize gerekli olan bir kod kalıbıdır.
2. Blogger yazı yazarken HTML kısmına tıklayarak altta ki kodu ekleyin ve yazınıza oluştur kısmından devam edin.
<i class="icon-cloud-download icon-large"></i>
3. Kırmızı renkli kısıma istediğiniz icon kodunu eklerseniz o icon yazınızda görünecektir.
4. Eğer iconun sağ tarafında ki kısıma yazı eklemek için yapacak olduğumuz işlem şöyledir.
<i class="icon-chevron-right icon-large">Buraya yazınızı yazın...</i>
5. Eğer iconlara animasyon vermek istiyorsanız o zaman üstteki kodun sonuna icon-spin kodunu eklememiz yeterlidir.
<i class="icon-cloud-download icon-spin">Buraya yazınızı yazın...</i>
6. Icona border vermek için.(çerçeve ekleme)
<i class="icon-cloud-download icon-border"></i>

İcon kodlarını indirmek için buraya tıklayın.

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
© by bilgicafem61
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Hiç yorum yok:

Yorum Gönder