Birçoğumuz tasarladığımız web sayfalarında ikon kullanmaya ayrıca özen gösteririz. Çünkü çeşitli ikonlar kullanılarak hazırlanan web sayfaları kullanıcılar tarafından her zaman daha çok ilgi görüyor. Web sayfalarımızda ikonları kullanabileceğimiz birçok farklı kütüphane bulunuyor.
Bugün bu kütüphaneler içerisinde hem ücretsiz hem de en popülerlerinden birisi olan Font Awesome kütüphanesinin kullanımını anlatacağım.
Font Awesome kütüphanesinin kullanımı oldukça basittir. Ayrıca bu kütüphane bizlere ücretsiz olarak kullanabileceğimiz tam 1609 ikon seçeceği sunuyor.
Konuyu daha fazla uzatmadan Font Awesome kullanımına bakalım.
Font Awesome Kullanımı
⇒ İlk olarak font awesome sayfasına gidiyoruz. Burada Start for Free butonuna tıklıyoruz.
⇒ Burada email adresimizi yazıyoruz ve Send Kid Code butonuna tıklıyoruz.
⇒ Bu aşamada email adresimize bir link gönderiliyor. Bu linke tıklıyoruz ve gelen ekranda parolamızı oluşturuyoruz. Set Password & Continue butonuna tıklayarak devam ediyoruz.
⇒ Bu aşamada isterseniz bilgilerinizi girerek devam edebilirsiniz. Ben “No thanks. Let’s skip this step for now” linkine tıklayarak devam ediyorum.
⇒ Kayıt işlemimiz tamamlandı. Artık aşağıdaki resimde olduğu gibi size özel bir kod üretiliyor. Şimdi bu script kodunu kopyalamak için Copy Kit Code butonuna tıklıyorum.
⇒ Kopyaladığımız bu kodu Html sayfamızda head etiketleri arasına yapıştırıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <head> <!-- Place your kit's code here --> <script src="https://kit.fontawesome.com/48fdvc79c22.js" crossorigin="anonymous"></script> </head> <body> <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! --> </body> </html> |
Bilgilendirme : Bu kod benim için üretilen gerçek kod değildir.
Bu aşamadan sonra ücretsiz ikonlar içerisinden istediğimizi web sayfalarımızda kullanabiliriz.
⇒ Icons linkine tıklayarak tüm ikonların olduğu sayfayı açıyorum.
⇒ Burada öncelikle ücretsiz ikonları filtrelemek için soldaki menüden Free linkine tıklıyorum. Sonrasında isterseniz arama kutusundan direkt olarak bir ikon aratabilir veya tüm ikonları inceleyerek istediklerinizi kullanabilirsiniz.
Örnek olması için telefon ikonunu kullanacağım. Telefon ikonuna tıklıyorum.
⇒ Burada kırmızı kutu içerisine aldığım i etiketini üzerine tıklayarak kopyalıyorum.
Kopyaladığım kodu Html sayfama yapıştırıyorum. İsterseniz bu ikonun boyutunu büyültmek için fa-2x, fa-3x, fa-5x, fa-7x, fa-9x class larını da ekleyebilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <head> <!-- Place your kit's code here --> <script src="https://kit.fontawesome.com/48fdvc79c22.js" crossorigin="anonymous"></script> </head> <body> <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! --> <i class="fas fa-phone fa-2x"></i> <i class="fas fa-phone fa-3x"></i> <i class="fas fa-phone fa-5x"></i> <i class="fas fa-phone fa-7x"></i> <i class="fas fa-phone fa-9x"></i> <br> <i class="fas fa-user fa-2x"></i> <i class="fas fa-user fa-3x"></i> <i class="fas fa-user fa-5x"></i> <i class="fas fa-user fa-7x"></i> <i class="fas fa-user fa-9x"></i> </body> </html> |
Artık Html sayfamı tarayıcıda açtığımda ikonlarımı farklı boyutlarda görebiliyorum.
Umarım “Font Awesome Nedir? Font Awesome 6 Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Web Sayfalarında Google Fonts Kullanımı
Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)
Yeni bir yazımda görüşmek üzere.
