Font Awesome siteye nasıl eklenir, kullanımı, örnekler

12.09.2014
ilketkinlik
4847

Vektörel simge seti olan font awesome, değiştirilebilen özellikleri sayesinde günümüz web sitelerinin vazgeçilmez simgesel font setlerinden biridir.

Font Awesome siteye nasıl eklenir, kullanımı, örnekler

Font awesome kolay bir şekilde özelleştirilebilir ( renk, boyut, gölge gibi ), ölçeklendirilebir bir vektör simge setidir. Simge setini indirmek için tıklayınız.

Temel Özellikleri

Tek bir font ile 479 simgeyi sitenize ekleyebilirsiniz.

Simgelerin kullanımında javascript gerektirmez.

Tamamiyle ücretsiz olarak kullanılır.

CSS ile kontrol edilebilir.

Retina ekranlar ile uyumludur.

Vektörel yapıda olduğu için istenilen boyuta ölçeklendirilebilir.

İlk olarak Bootstrap için geliştirilmiş olmasına rağmen, tüm frameworkler ile uyumludur.

Ekran okuyucularda problemsiz olarak görüntülenir.

Font Awesome sitemize nasıl ekleyeceğiz

İki satır kod ekleyerek bu fontu sitenizde kullanılabilir hale getirebilirsiziniz. Eğer bu konularda bilginiz yeterli ise LESS dosyasını konfigüre ederek de sitenize ekleyebilirsiniz. FontAwesome Bootstrap 3 ile de çok uyumlu olarak kullanılabilmektedir.

BootstrapCDN kullanarak :

<head> etiketleri arasına aşağıdaki kodu kopyalayınız.

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

CSS dosyası kullanarak :

1. İndirdiğiniz font awesome klasörünün tamamını projenizin içerisine kopyalayın,

2. <head> etiketleri arasına aşağıda bulunan kodu yapıştırınız.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Font Awesome Kullanımı

Fontu ekleyip, kullanılabilir hale getirdikten sonra font awesome simgelerini site içerisinde herhangi bir bölümünde <i> etiketiyle görüntüleyebilirsiniz.

İlk olarak simgelerini görüntüleyebilmek için fa ön ekini kullanıp daha sonra görüntülemek istediğiniz simgenin ismini eklemeniz yeterli olacaktır. HTML'in sementik yapısı açısından span etiketini de alternatif olarak i yerine kullanabilirsiniz.

<i class="fa fa-camera-retro"></i>

Simgeleri daha büyük boyutlarda görüntülemek için fa-lg, fa-2x, fa-3x, fa-4x, fa-5x class'larını kullanabilirsiniz.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Simgelerin sabit genişlikte olmasını istiyorsanız fa-fw class'ını kullanmalısınız. Bu class'ın avantajı farklı simge genişliklerinin birbirine uyumunu sağlamakta kullanılmasıdır. Özellikle liste gruplarında ve menu kullanımında kullanışlıdır.

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Anasayfa</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Kütüphane</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Uygulamalar</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Ayarlar</a>
</div>

Sırasız listelerde simge kullanımında fa-ul ve fa-li class'larını kullanarak varsayılan liste simgesi olarak kullanabilirsiniz.

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Liste simgeleri</li>
<li><i class="fa-li fa fa-check-square"></i>sırasız listelerde</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>simge olarak</li>
<li><i class="fa-li fa fa-square"></i>kullanılabilir.</li>
</ul>

Ayrıca diğer örneklere font awesome'ın kendi sitesinden ulaşarak inceleyebilirsiniz.