D.BAKIR
Parçalı Bulutlu Bugün
10°C / -2°C
BATMAN
Çok Bulutlu Bugün
8°C / 0°C
MARDİN
Parçalı Bulutlu Bugün
8°C / 0°C

  • Bitki banyoları nasıl hazırlanır?
    Bitki banyoları nasıl hazırlanır?
  • Antioksidan etkili muzlu ve mangolu smoothie
    Antioksidan etkili muzlu ve mangolu smoothie
  • Kış depresyonundan kurtulmanın yolları
    Kış depresyonundan kurtulmanın yolları
  • Detoks ile bağışıklık sisteminizi güçlendirin
    Detoks ile bağışıklık sisteminizi güçlendirin
  • Sağlık Sigortası Genel Şartları
    Sağlık Sigortası Genel Şartları
  • Seyahat Sağlık Sigortası Genel Şartları
    Seyahat Sağlık Sigortası Genel Şartları
  • Genel Sağlık Sigortası Hakkında Bilinmesi Gerekenler
    Genel Sağlık Sigortası Hakkında Bilinmesi Gerekenl
  • Paraguay Çayı Faydaları
    Paraguay Çayı Faydaları
  • Soğan Suyu Kürü Yapılışı ve İyileştirici Etkileri
    Soğan Suyu Kürü Yapılışı ve İyileştirici Etkileri
  • Mevsim geçişlerinde dökülen saçlara kekikli reçete
    Mevsim geçişlerinde dökülen saçlara kekikli reçete
WordPress Font Awesome Kullanımı

Hızlı, pratik, kullanıcı dostu olması gibi nedenlerle son zamanlarda çoğu web projesinde gördüğümüz Font Awesome hakkında bilgi vermek istiyorum. Font Awesome nedir, ne değildir, ne işe yarar, nasıl kullanılır gibi soruların yanıtlarını bu yazıda vermeye çalışacağım.

font awesome

Font Awesome Nedir?

Font Awesome, vektörel ikonların font olarak bir araya geldiği, @font-face özelliğiyle çalıştığı için kullanımı oldukça kolay olan açık kaynaklı bir font/ikon kütüphanesidir.

Kısacası font awesome herkesin kullanımına açık olan bir font yani yazı tipi topluluğudur. Fakat bildiğimiz fontlarda harfler ve rakamlar varken font awesome’da ikonlar vardır.

Font Awesome Kullanmanın Avantajları Nelerdir?

Yukarıdaki tanımda da okuduğunuz üzere font awesome’ı kullanmaktaki amaç eski tip .jpg, .png, .gif grafik ikonlarının yerine daha hızlı, modern ve basit karakter ikonları göstermektir. Grafik ikonlar yerine font awesome ikonları kullanmanın avantajları kısaca şunlardır:

  • Blogda kullanacağınız ikonlar grafik olmadığı için sayfanın açılması daha hızlı olacaktır.
  • Font awesome ikonları hiçbir optimizasyona gerek duymadan mobil cihazlara uyacaktır.
  • Çok geniş bir ikon paketi mevcut olduğundan sadece basit bir HTML kodu kullanarak yüzlerce ikondan ücretsiz faydalanabileceksiniz.
  • İkonlar birbiriyle uyumlu olduğundan ve hepsi aynı familyadan geldiğinden görsel açıdan şık olacaktır.

Blogger’da Font Awesome Nasıl Kullanılır?

Font awesome ikonlarını Blogger’da kullanmanız için yapmanız gereken ilk şey font awesome dosyasını tanıtmak tır. Bunun için Şablon > HTML’yi Düzenle diyerek <head> kodunun altına şu kodu eklemelisiniz:

<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet” />

Şimdi  font awesome’ın ikon kütüphanesini ziyaret ederek kullanmak istediğimiz ikonun üzerine tıklayalım ve o ikona ait kodu alalım. Örnek olarak ben futbol topu ikonunu seçtim ve bu ikonu blogda göstermek için yapmam gereken tek şey o ikona ait HTML kodunu istediğim yere eklemek. Futbol topu ikonunun kodu şu:

<i class=”fa fa-futbol-o”></i>

Bunu kodu eklediğimizde elde ettiğimiz sonuç ise şu:

Futbol topu örneğinden devam edelim. Futbol topu ikonunu daha farklı boyutlarda kullanmak istediğimizi düşünelim. Bunun için mevcut koda çok küçük bir ekleme yapacağız. Farklı ikon boyutları için odlar şu şekilde:

<i class=”fa fa-futbol-o fa-lg”></i>
<i class=”fafa-futbol-o fa-2x”></i>
<i class=”fa fa-futbol-o fa-3x”></i>
<i class=”fa fa-futbol-o fa-4x”></i>
<i class=”fa fa-futbol-o fa-5x”></i>

Ortaya çıkan sonuç ise şu şekilde:

Örneklerle devam ediyoruz. Şimdi de yine font-awesome’ın nimetlerinden faydalanarak sosyal ikonlardan bir yatay menü yapalım. Bunun için kullanacağımız kod şu şekilde olmalı:

<a href=”#”><i class=”fa fa-facebook fa-lg”></i></a>
<a href=”#”><i class=”fa fa-twitter fa-lg”></i></a>
<a href=”#”><i class=”fa fa-instagram fa-lg”></i></a>
<a href=”#”><i class=”fa fa-google-plus fa-lg”></i></a>
<a href=”#”><i class=”fa fa-linkedin fa-lg”></i></a>
<a href=”#”><i class=”fa fa-pinterest fa-lg”></i></a>
<a href=”#”><i class=”fa fa-youtube fa-lg”></i></a>
<a href=”#”><i class=”fa fa-rss fa-lg”></i></a>

Ortaya çıkan sonuç ise şu şekilde:

İkonlarının renginin yeşile döndüğünü fark ettiniz sanırım. Bunun nedeni sosdyal takip hesapları için ikonlara link vermem ve Blog Hocam’da tüm linklerin renginin yeşil olarak tanımlanmış olması. Sizin blogunuzda linkler kırmızı ise ikonlar da otomatik olarak kırmızıya dönüşecektir.

Fakat font awesome ikonlarını CSS ile istediğiniz gibi kontrol edebilirsiniz. Örneğin her ikonu farklı renk yapabilirsiniz. Bunu da bir örnekle gösterelim isterseniz. Bunun için her bir class için stil kodu tanımlamamız yeterli olacaktır:

<a href=”#”><i class=”fa fa-facebook fa-lg”></i></a><style>.fa-facebook{color:#3b5998}</style>
<a href=”#”><i class=”fa fa-twitter fa-lg”></i></a><style>.fa-twitter{color:#00aced}</style>
<a href=”#”><i class=”fa fa-instagram fa-lg”></i></a><style>.fa-instagram{color:#125688}</style>
<a href=”#”><i class=”fa fa-google-plus fa-lg”></i></a><style>.fa-google-plus{color:#dd4b39}</style>
<a href=”#”><i class=”fa fa-linkedin fa-lg”></i></a><style>.fa-linkedin{color:#007bb5}</style>
<a href=”#”><i class=”fa fa-pinterest fa-lg”></i></a><style>.fa-pinterest{color:#cb2027}</style>
<a href=”#”><i class=”fa fa-youtube fa-lg”></i></a><style>.fa-youtube{color:#bb0000}</style>
<a href=”#”><i class=”fa fa-rss fa-lg”></i></a><style>.fa-rss{color:#ff6600}</style>

Ortaya çıkan sonuç ise şu şekilde:

Aynı örnek üzerinden devam edelim. Font awesome yardımıyla gadget olarak ekleyebileceğimiz bir sosyal takip eklentisi yapalım. Bunun için yukarıdaki örnekte kullandığımız ikonları alt alta sıralayalım ve yanlarına da takip seçeneklerini yazalım. Bunun için kodu şu şekilde düzenliyoruz:

<ul class=”fa-ul”>
<li><a href=”#”><i class=”fa-li fa fa-facebook fa-lg”></i>Facebook</li></a><style>.fa-facebook{color:#3b5998}</style>
<li><a href=”#”><i class=”fa-li fa fa-twitter fa-lg”></i>Twitter</li></a><style>.fa-twitter{color:#00aced}</style>
<li><a href=”#”><i class=”fa-li fa fa-instagram fa-lg”></i>Instagram</li></a><style>.fa-instagram{color:#125688}</style>
<li><a href=”#”><i class=”fa-li fa fa-google-plus fa-lg”></i>Google+</li></a><style>.fa-google-plus{color:#dd4b39}</style>
<li><a href=”#”><i class=”fa-li fa fa-linkedin fa-lg”></i>LinkedIn</li></a><style>.fa-linkedin{color:#007bb5}</style>
<li><a href=”#”><i class=”fa-li fa fa-pinterest fa-lg”></i>Pinterest</li></a><style>.fa-pinterest{color:#cb2027}</style>
<li><a href=”#”><i class=”fa-li fa fa-youtube fa-lg”></i>YouTube</li></a><style>.fa-youtube{color:#bb0000}</style>
<li><a href=”#”><i class=”fa-li fa fa-rss fa-lg”></i>RSS</li></a><style>.fa-rss{color:#ff6600}</style>
</ul>

Ortaya çıkan sonuç ise şu şekilde oluyor:

Kodlarda değişiklikler yaparak ve Font Awesome resmi sitesindeki dökümanlar ile örneklerden faydalanarak bu ikonlardan çok güzel çalışmalar yapabilirsiniz.


Hızlı, pratik, kullanıcı dostu olması gibi nedenlerle son zamanlarda çoğu web projesinde gördüğümüz Font Awesome hakkında bilgi vermek istiyorum. Font Awesome nedir, ne değildir, ne işe yarar, nasıl kullanılır gibi soruların yanıtlarını bu yazıda vermeye çalışacağım. Font Awesome Nedir? Font Awesome, vektörel ikonların font olarak bir araya geldiği, @font-face özelliğiyle çalıştığı için kullanımı oldukça kolay olan […]


YORUM YAPMAYA NE DERSİNİZ

Zorunlu İşlem Sonucu * Time limit is exhausted. Please reload CAPTCHA.


Benzer Yazılar

Yandex.Metrica