font-awesome

-- CSS3 & HTML5

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

Merhaba Arkadaşlar uzun bir aradan sonra tekrar burdayım Bu yazımda Font Awesome un ne olduğunu nasıl kullanıldığını anlatıcağım.

 

Font Awesome Nedir ?

Font Awesome en popüler, en çok kullanılan ikon fontudur.Font Awesome de hemen hemen her türlü ikon mevcuttur.Kullanımı oldukça kolaydır.

 

Font Awesome Nasıl Kullanılır ?

Buradan Font Awesome sitesine giriyoruz.Hemen önümüze çıkan download butonunda tıklayarak indiriyoruz.

İndirdiğimiz Dosyada 4 Farklı klasör mevcuttur.

 

Css, Font, Less, Scss

 

Css dosyalarını Ben Normal olarak kullanacağım için aşağıdaki gibi Sayfama dahil ediyorum.Bu arada Yukarıdaki Klasörlerden CSS ve Fonts klasörlerini alamamız yeterli.

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

Şimdide kullanımını öğrenelim.Tüm iconlar aşağıdaki sayfada mevcuttur.

http://fortawesome.github.io/Font-Awesome/icons/

<i class="fa fa-facebook"></i>

Örneğin Facebook ikonunu yukarıdaki şekilde kullanabilirsiniz.İcon Boyutunu arttırmak veya düşürmek için aşağıdaki örneği inceliyebilirsiniz.Gördüğünüz gibi icon-large, icon-2x, icon-3x, icon-4x gibi sınıfları kullanabilirsiniz veya CSS`den font-size ile müdahale edebilirsiniz.

<i class="icon-facebook icon-4x"></i>

Bu ikon fontu dışında aşağıdakileride kullanabilirsiniz.

http://typicons.com/

http://www.entypo.com/

http://glyphicons.com/