Programlama

Fontawesome Nedir Web Sitesinde Nasıl Kullanılır ?

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 kullanılır  ve nasıl çalışır birazdan bu konulardan bahsedelim.

Fontawesome-iconlar
Fontawesome-iconlar

Fontawesome Nasıl Çalışır ?

Fontawesome iconlarını sitenizde kullanmak istiyorsanız öncelikli olarak sitesini ziyaret edebilirsiniz. Fontawesome adresinden ‘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 Fontawesome sitesi için ş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”>

Fontawesome Nasıl Kullanılır ?

Fontawesome Nasıl Kullanılır :Fontawesome 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.

İLGİNİZİ ÇEKEBİLİR:  Lightbox Nedir Bootstrap İle Resim Galerisi Nasıl Yapılır?
Fontawesome-facebook-icon
Fontawesome-facebook-icon
  • <i class=”fab fa-facebook”></i>

Örnekteki gibi kodun üzerine tıkladığınızda kod kopyalanır 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 İkonları Boyutlandırması Nasıl Yapılır ?

Eğer ikon boyutunu büyütmek isterseniz bunun içinde yazacağınız basit bir kod ile fontawesome boyutlandırma yapabilirsiniz. Örneğin facebook ikonun kullanacaksınız bunu daha büyük bir şekli lazım.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.

 

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu