Fontawesome Nedir Web Sitesinde Nasıl Kullanılır ?
İçindekiler
Fontawesome Nedir ?
Fontawesome nedir kavramını kısaca özetleyecek olursak web sitelerinde kullanılan görsel ( ikonlar ) ögelerin ücretsiz bir şekilde sunulduğu bir css kütüphanesidir. Web sitesi hazırlıyorsunuz ve işinize yarayacak küçük görseller ( ikonlar ) lazım, bunların tamamını bulabileceğiniz bir sitedir. Ücretli olanlar var ancak ücretsiz olarak bulabileceğiniz bir çok seçenek sizin için yeterli olacaktır.
Fontawesome Nasıl Çalışır ?
Bu iconlarını sitenizde kullanmak istiyorsanız yapmanız gereken ilk adım websitesini ziyaret etmektir. Sitenin ana sayfasında bulunan ‘start for free’ butonuna tıklayıp ücretsiz üyelik işlemlerini başlatıyoruz. Bizden bir mail adresi isteyecek, bir mail adresi girilip ‘create & use this kit’ butonuna tıklandığında üyelik onay maili alacaksınız. Mail onaylandıktan sonra bir şifre belirlemenizi isteyecek. Bu adımı da tamamladıktan sonra ayrıntı bilgilere gerek olmadan bize lazım olan koda ulaşabiliyoruz.
Aşağıda yazdığım kod örnektir sitenize eklemeyin çalışmaz.
<script src=”https://kit.fontawesome.com/1535646d55.js” crossorigin=”anonymous”></script>
Buna benzer bir kod üretecek bu kodu alıp sitemizin <head></head> etiketleri arasına eklediğimizde artık fontawesome ikonlarını sitenizde kullanabiliriz.
Bir başka yöntem ise vereceğim link. Daha önce Fontawesome sitesinde böyle üyelik işlemleri yoktu direk kodları veriyordu o kodlar da halen çalışmakta ben linki paylaşayım.
Aşağıdaki link i sitenizde <head></head> etiketleri arasına eklediğiniz zaman Fontawesome kütüphanesi sitenize entegre olacaktır.
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.5.0/css/all.css” integrity=”sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU” crossorigin=”anonymous”>
Bu İkonlar Nasıl Kullanılır ?
Uygulamanın sitesine giriş yaptığımızda en üstte bulunan ‘search icons’ kutucuğuna kullanmak istediğimiz ikonun ingilizce ismini yazıyoruz. Örneğin facebook gibi. Bulunan sonuçların üzerine geldiğimiz zaman üzerinde pro yazmayanlar ücretsiz olanlardır. Bunlardan beğendiğimize tıklıyoruz. Açılan sayfadan ikonumuzun resminin hemen üzerinde sitede kullanmamızı sağlan html kodu bulunmakta.
- <i class=”fab fa-facebook”></i>
Örnekteki gibi kodun üzerine tıkladığınızda kod kopyalanmış olur. Sitenizde nerede kullanmak istiyorsanız bu kodu eklemeniz yeterli olacaktır.
- <i class=”fas fa-facebook”></i>
Not: Eğer fab la başlayan class lar açılmas ise fab yazan yeri fas yada fa olarak değiştirmenizi öneririm.
Fontawesome İcon Büyütme Nasıl Yapılır ?
Eğer ikon boyutunu büyütmek isterseniz bunun içinde yazacağınız basit bir kod ile boyutlandırma yapabilirsiniz. Örneğin facebook ikonun kullanacaksınız bunu daha büyük bir şekli lazım. Ayrıca bunun için,
- <i class=”fab fa-facebook”></i> olan kodumuzu
- <i class=”fab fa-facebook fa-3x”></i> şeklinde değiştiriyoruz.
Diğer boyutlar için ise yine aynı şekilde fa-2x fa-3x fa-4x fa-5x gibi boyutlandırmalar kullanabilirsiniz.
