Font Awesome Nedir ? & Nasıl Kullanılır ?
Font Awesome Nedir ?
Font Awesome web sitelerinde kullandığımız ikon karakterlerini css olarak tasarlayan ve bizlere kullanmamız için sunan bir css kütüphanesidir.
Aslında ilk olarak web siteleri için çıkan Font Awesome günümüzde artık o kadar büyüdü ki sadece web olarak değil android, ios, pc ve hatta oyun konsolları gibi bir çok yerde uygulama geliştirirken kullanılabiliyor.
CSS desteğinin yanı sıra artık svg desteği de sunuyor, anlayacağınız o ki Font Awesome bizlerin geliştirdiği site ve uygulamalarda kullanabileceği ikon paketleridir.
Neden Font Awesome Kullanmalıyız ?
Önceden Font Awesome ve alternatifleri piyasada türemeden önce bizler uygulamalarımız için kullanacağımız ikonları herhangi bir görsel editörde tasarlamak ve bunları png veya svg gibi çıktılar alarak kullanmak zorundaydık, haliyle durum böyle olunca hem ikonları oluşturmak zaman alıyordu hemde oluşturduğumuz ikonlar web sitelerinin daha yavaş açılması gibi problemler çıkarıyordu.
Font Awesome bizlere bunun çözümünü sunuyor ve tabi ki buda bizlerin işine geliyor.
Sitemizde kullanacağımız ikon u dakikalarca tasarlayıp siteye uyarlamaktansa yazacağımız 30 40 karakter kodlar ile sitemize veya uygulamamıza eklemek daha rahat ve kullanışlıdır. Aynı zamanda CSS ile geliştirildiği için bu ikonlar png gibi bir yapıya göre çok daha hızlı çalışacaktır.
İşte bu yüzden Font Awesome kullanıyoruz, kullanmalıyız.
Ayrıca son çıkan sürümleri ile Font Awesome dosyalarını sitemize indirip eklemek yerine Font Awesome un bizlere sunduğu API desteği ile çok rahat bir şekilde ekleyebiliyoruz.
Font Awesome Nasıl Kurulur ?
Font Awesome Kullanımı API ile
Font Awesome u API ile indirmeden kullanmak için ilk olarak Font Awesome un internet sitesine gitmeli ve hesap oluşturmalısınız. Hesap oluşturduktan sonra Font Awesome un size vereceği bağlantı adresini projenize dahil ettikten sonra çok rahat bir şekilde projelerinizde Font Awesome u kullanabilirsiniz.
Font Awesome un size verdiğini bağlantı adresini
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Şeklinde projenize dahil etmeniz yeterli olacaktır. Projenize dahil ettikten sonra
<i class="fa fa-user-plus"></i> veya <i class="fa fa-try"></i>gibi kodlar ile istediğimiz ikonları kullanabiliriz. Bütün Font Awesome ikonlarına bakmak isterseniz Font Awesome un ikon arama sayfasına bakabilirsiniz.
Font Awesome İkon Arama Sayfası
Font Awesome Kullanımı İndirerek
Font Awesome u indirerek kullanmak için ilk olarak sitesine gitmeniz ve indirmeniz gerekiyor.
Font Awesome u indirdikten sonra projenize
<link rel="stylesheet" href="fontawesome5/css/font-awesome.css" /> // eski sürümleri bu şekilde kullanılıyor.
<link rel="stylesheet" href="fontawesome5/css/all.css" /> // yeni gelen güncelleme ile bu şekilde kullanılıyor.
yukarıdaki gibi font-awesome.css in bulunduğu yeri belirten kodu "<head> </head>" taglari arasına ekleyip kullanabilirsiniz.
Font Awesome u projemize ekledikten sonra ikonları kullanmak istediğimiz yerde
Font Awesome İkon Arama Sayfası
Font Awesome u projemize ekledikten sonra ikonları kullanmak istediğimiz yerde
<i class="fa fa-user-plus"></i> veya <i class="fa fa-try"></i>gibi kodlar ile istediğimiz ikonları kullanabiliriz. Bütün Font Awesome ikonlarına bakmak isterseniz Font Awesome un ikon arama sayfasına bakabilirsiniz.
Font Awesome İkon Arama Sayfası
Yorum Gönder