Çarşamba, 23 Mayıs 2018
Font Awesome Nasıl Kullanılır
Eğitim

Font Awesome Nasıl Kullanılır

Doruk Karaboncuk Doruk Karaboncuk
05 Aralık 2016

Font Awesome web sayfası yaparken hayatınızı kolaylaştıracak bir CSS eklentisidir.

İçerisinde 675 ikon barındıran bir fonttur aslında. Web sayfanızın CSS’i ile birlikte kullanıldığından bir yazı yazar gibi ikon kullanabilirsiniz.

Font Awesome kullanmak için öncelikle kaynak dosyalarını indirmemiz gerekiyor. Kullanımı tamamen ücretsizdir ve kendinize göre özelleştirebilirsiniz.

İndirmek için resmi sayfasını ziyaret edebilirsiniz.

İndirdikten sonra CSS ile kullanmak için css klasöründe bulunan font-awesome.css veya font-awesome.min.css dosyalarından birini kendi CSS klasörünüze ekleyin. Herhangi bir değişiklik yapmadan kullanmak için ise fonts klasörünü CSS dosyasını koyduğunuz klasörün bir üst klasörüne yerleştirebilirsiniz. Örnek olarak şu şekilde gözükecektir.

  • css
    • font-awesome.css
  • fonts
    • fontawesome-webfont.eot
    • fontawesome-webfont.svg
    • fontawesome-webfont.ttf
    • fontawesome-webfont.woff
    • fontawesome-webfont.woff2
    • FontAwesome.otf

Font Awesome Kullanmaya Başlayalım

Kurulumu bu kadar basittir. Sizin sadece <head> </head> html etiketlerinin arasına CSS’i dahil etmeniz kalır. Bunu da aşağıdaki kod ile yapabilirsiniz.

<link rel='stylesheet' href='css/font-awesome.css' type='text/css' media='all' />

Artık istediğiniz alanda ikonlarınızı gönül rahatlığı ile kullanabilirsiniz. CSS 3.0 ile eklenen özellikler sayesinde ister döndürebilir, isterseniz de hareketli ikonlar yaratabilirsiniz.

Varsayılan olarak kullanımı baş harflerinin oluşturduğu class ile olur ve <i></i> html etiketleriyle kullanılır.

Bir anasayfa için ev ikonu linki vermek istiyorsanız aşağıdaki kodu kullanabilirsiniz.

<a href="/anasayfa" title="Anasayfa">
<i class="fa fa-home"></i>
</a>

Font Awesome için daha fazlası

Linkimizin arasına <i> etiketi ile bir ev ikonu ekledik. Tüm ikonları eklerken önce “fa” classını ekliyoruz ve arkasından kullanmak istediğimiz ikonun kısa yolunu yazıyoruz. Tüm ikonların listesi kendi web sayfalarında mevcut.

CSS içerisinde kendinden gelen yardımcılar da bulunmaktadır. Bu yardımcılar sayesinde efektler verebilir, ikonu döndürebilir veya font büyüklüğünü ayarlayabilirsiniz.

Font büyüklüğünü ayarlamak için “fa” classının yanına fa-2x, fa-3x ekleyerek 2 katı 3 katı anlamında kullanabiliriz.

Örnek

<i class="fa fa-2x fa-home"></i>

Bir ikonu döndürmek içinde aynı şekilde “fa” classının yanına fa-rotate-90, fa-rotate-180, fa-rotate-270 classlarını ekleyebiliriz.

Örnek

<i class="fa fa-home fa-rotate-90"></i>

Eğer bir liste yaratıyorsanız ve farklı genişliklerde ikonlar kullanmanız gerektiyse “fa-fw” classı yardımcınız olacaktır. Ben şahsen sağa sola yazı kaymalarını hiç sevmediğim için bu classı bolca kullanıyorum.

Örnek

<i class="fa fa-home fa-fw"></i>

Bazen ajax yüklemeleri veya sayfa yüklemeleri yaptırmak istediğinizde hareketli gifler yerine ikonları döndürebilirsiniz. İkon döndürmek için fa-spin ve fa-spinner classlarını kullanıyoruz.

Örnek

<i class="fa fa-home fa-spin"></i>

Font Awesome web sayfanızda kullandığınız buttonları da çok güzel, sade ve anlaşılır hale getirir. Tüm HTML etiketleriyle hemen hemen kullanılıyor ve kullanımı çok rahat. Seçenekleri de bol olunca web sayfanıza başlarken hemen başında dahil etmenizde fayda var.

Ayrıca web sayfanıza başlarken Google Fonts kullanımını da gözardı etmemeniz gerekir. Google Fonts’un nasıl kullanılacağına dair yazıya buradan ulaşabilirsiniz.

Emoji ile Tepki Ver

0
0
1
0
0
0

Yorumlar

Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration