Gönderen Konu: FONT AWESOME NEDİR?  (Okunma sayısı 113 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
FONT AWESOME NEDİR?
« : 22 Eyl 2016, 19:26:05 »
Font Awesome, sitelerimizde kullanabileceğ imiz bir ikon takımıdır.
Aslına bakarsanız, bu ikonlar tıpkı bir harf gibi font olarak tasarlanmışlar dır. Bu sayede bir ikonu binlerce kez büyütseniz bile ikon bozulmaz.
Font Awesome, tamamen ücretsiz ve açık kaynak kodludur. GitHub üzerinden ulaşmak için tıklayın;
GitHub
Font Awesome, CSS içerisinde tanımlanmıştır . Kullanım şekli ise gayet basittir. Gerekli sınıf adlarını PHP içerisinde kullanmak. 
Adım adım anlatacağım.

KULLANIMI

1.ADIM

fontawesome.io adresine gidiyorsunuz ve dosyayı indiriyorsunuz . İndirilen .rar dosyasını çıkartıyorsunu z. 4 tane kilasor göreceksiniz

1. kilasor css
2. kilasor fonts
3.kilasor less
4. kilasor scss

2.ADIM
Biz SASS veya LESS kullanmadan direkt saf CSS kullanacağımız için ihtiyacımız olan iki klasör var.
Bunlar; CSS ve FONTS klasörleri.
CSS ve FONTS klasörlerini alin ve temanizin css ve fonts kilasorlerine atin. Diğerlerini silin.
3.ADIM

CSS klasöründe iki adet CSS dosyası var. Birisi normal CSS dosyası, diğeri ise minified sürüm yani optimize edilmiş sürüm. Minified sürümde gereksiz boşluklar ve yorum satırları silindiği için dosya boyutu daha küçük oluyor. Bu yüzden ben normal CSS dosyasını siliyorum. Minified sürümü kullanacağım.

4.ADIM

Artık dosyalarımız hazır. Tek yapmamız gereken  web sayfamıya CSS dosyamızı dahil etmek.
Bunun icin head taklari arasina Smfkulananlar  index.template .php de

Bul
Kod: [Seç]
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
Altina ekle
Kod: [Seç]
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/font-awesome.min.css" />
diger cms lerde dedigim gibi head tagi arasina ekliyoruz yani

Kod: [Seç]
<head>
  <meta charset="UTF-8" />
  <title>Webtiryaki</title>
  <link rel="stylesheet" href="css/font-awesome.min.css" />
</head>

5.ADIM

Ve son adıma geldik. Artık Font Awesome kullanabiliriz .
Aşağıda ki örnekleri dikkatli inceleyin.  Çok basit bir kullanım şekli olduğunu anlayacaksınız .

Kod: [Seç]
<body>
  <i class="fa fa-bicycle"></i>
  <i class="fa fa-bus"></i>
</body>

Tek yapmanız gereken body etiketi içerisinde bir i tagı açmanız ve class olarak istediğiniz ikonun classını vermeniz.
İkon listesine buradan ulaşabilirsini z.

KOD AÇIKLAMASI;

fa Bu sınıf her ikonun zorunlu sınıfıdır.
fa-bus  Bu sınıf istediğim ikonun sınıfı.
Örneğin fa-heart fa-twitter fa-facebook fa-star

BÜYÜKLÜK ÖZELLİKLERİ

İkonların büyüklüklerini sadece bir sınıf ile ayarlayabilirsiniz. Font Awesome ‘da 5 farklı büyüklük sınıfı vardır.
Aşağıdaki örnekte beşini de kullandım.

Kod: [Seç]
<body>
  <i class="fa fa-heart fa-1x"></i>
  <i class="fa fa-heart fa-2x"></i>
  <i class="fa fa-heart fa-3x"></i>
  <i class="fa fa-heart fa-4x"></i>
  <i class="fa fa-heart fa-5x"></i>
</body>

KOD AÇIKLAMASI;

“fa-1x” > Bu sınıf ikonun boyunu varsayılanın 1 katı yapar.
“fa-2x” > Bu sınıf ikonun boyunu varsayılanın 2 katı yapar.
“fa-3x” > Bu sınıf ikonun boyunu varsayılanın 3 katı yapar.
“fa-4x” > Bu sınıf ikonun boyunu varsayılanın 4 katı yapar.
“fa-5x” > Bu sınıf ikonun boyunu varsayılanın 5 katı yapar.
 
LİSTE İKONLARI ÖZELLİKLERİ

İkonları yaptığınız listelerde de rahatlıkla kullanabilirsiniz. Bunun için fa-ul ve fa-li sınıflarını kullanmanız gerekiyor.
Örnek
Kod: [Seç]
<body>
  <ul class="fa-ul">
    <li><i class="fa fa-check-square fa-li"></i>Eleman 1</li>
    <li><i class="fa fa-check-square fa-li"></i>Eleman 2</li>
    <li><i class="fa fa-check-square fa-li"></i>Eleman 3</li>
    <li><i class="fa fa-square fa-li"></i>Eleman 4</li>
    <li><i class="fa fa-square fa-li"></i>Eleman 5</li>
    <li><i class="fa fa-spinner fa-spin fa-li"></i>Eleman 6</li>
    <li><i class="fa fa-heart fa-li"></i>Eleman 7</li>
  </ul>
</body>
KOD AÇIKLAMASI;

“fa-ul” > Bu sınıf UL etiketini Font Awesome uyumlu yapar.
“fa-li”   > Bu sınıf LI etiketini Font Awesome uyumlu yapar.

Bunun gibi yüzlerce ozelik hayal gücünüze kalmiş.

Çevrimdışı weptiryaki

  • Genel Moderatör
  • Trade Sayısı: (0)
  • *
  • İleti: 89
  • Karma +3/-0
  • Cinsiyet: Bay
  • Webmaister
    • Profili Görüntüle
Ynt: FONT AWESOME NEDİR?
« Yanıtla #1 : 22 Eyl 2016, 21:34:26 »
Eline sağlik orhan hocam onemli bir bilgi kaynaği sunmuş'sunuz.