Bloğumda toplam 12 kategoride yazılmış 311 yazı ve 269 yorum var.

Sitelerinize FontAwesome ile Icon Set Nasıl Eklenir?

4 sene önce yazıldı, 6.648 kere okundu. 4

Merhabalar. İnternet sitelerimize icon eklemenin en güzel yollarından biri olan FontAwesome’ı sitelerimize nasıl ekleyeceğimizi anlatacağım. Öncelikle neden böyle bir şeye ihtiyacımız olduğundan bahsedelim isterseniz.

Şöyle ki, internet sitelerimizde başta sosyal medya ve menü butonlarımızdaki ikonlar için çoğu zaman ( font awesome gibi kütüphanelerden haberdar olmayanlar veya kullanılışını bilmeyenler ) photoshopda ikonu kesip/hazırlayıp/boyutlandırıp siteye imaj olarak yüklüyorlar. Sayfanın yüklenme süresini bir kenara bırakalım, tasarımda değişiklik yapmamız gerekirse yeniden boyutlandırmak için tekrar photoshopa almak gerekiyor. Png’lerle, küçültmeyle büyütmeyle uğraşıp duruyoruz. Ee hızlı olmamız gerekiyor kodlama yaparken? Hem daha hızlı ve daha kullanışlı bir yol varken, neden uğraşalım ki?

Font Awesome Kullanılışı

Font Awesome’ı sitemize eklememiz oldukça basit aslında. Bunun bilinen basit iki yolu var. Birincisi FontAwesome CDN’ini kullanarak kütüphaneyi tasarıma dahil etmek. Kendi sitesinde de verdiği aşağıdaki kodu sitemizin head tag’leri arasına eklediğimizde kütüphaneyi eklemiş oluyoruz.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

Bir diğer yol ise güncel dosyaları kendi sunucumuza atıp kütüphaneyi oradan çağırmak. Bunun için ise buradan siteye gidip Download diyoruz ve kütüphaneyi indiriyoruz. Eğer WordPress kullanıyorsak temamızın ana dizinine, farklı bir sistem kullanıyorsak arayüzün ana dizinine, direk html bir web sitesine eklemek istiyorsak direk ana dizine dosyaları atıyoruz ve font-awesome.min.css’i çağırıyoruz. Aşağıdaki ipuçlarını kullanabilirsiniz.

// eğer wordpress kullanıyorsak //

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/klasorunuz/font-awesome.min.css">

// html arayüz için //

<link rel="stylesheet" href="klasorunuz/font-awesome.min.css">

Font Awesome’ı Sitemizde Nasıl Kullanacağız?

Kütüphanemizi sitemize dahil ettik ve şimdi kullanacağız, peki nasıl? Her ikonun bir slug ismi var ( ingilizce karakterli, içerisinde boşluk olmayan ve küçük harflerden oluşan ) ve bu ikonların hangisini istiyorsak slug ismini yazıp ikonu çağırabiliriz. Aşağıda örnek kodları görebilirsiniz.

<i class="fa fa-ikonismi"></i> // standart kullanım

<i class="fa fa-ikonismi" style="font-size:36px;color:red;"></i> // stil eklenmiş hali

<i class="fa fa-ikonismi" class="ikonstili" id="ikonstili2"></i> // id ve/veya class eklenmiş hali

Peki bu ikonların isimlerini nereden bileceğiz? Merak etmeyin, buraya tıklayarak tüm ikonların listesine ulaşabilirsiniz. Dikkat etmeniz gereken şey ise, güncellemeden sonra liste de güncellenir. Eğer listede gördüğün ikonu yazdığınızda ikon görünmüyorsa indirdiğiniz ve sunucunuza yüklediğiniz font awesome kütüphanesi güncel değil demektir. Bu sebeple güncellemeniz gerekir.

BENZER  Yukarı Yapışan Menü Yapmak

Font Awesome ile ilgili ileri düzey bilgileri ilerleyen zamanlarda paylaşıyor olacağım. Şimdilik tamamen başlangıç düzeyinde bahsetmek istedim, anlaşılır olduğunu düşündüğüm bir yazımın daha sonuna geldik. Umarım faydalı olmuştur. Umarım artık imajlarla uğraşmak yerine gayet basit bir şekilde ikon eklediğiniz siteleriniz olur.

Başka bir yazıda görüşmek üzere.
İyi günler!

Konuyla alakalı bir şeyler yazabilirsin.

İsimTescil.net Sonunda Arayüzünü Güncelledi

Merhaba arkadaşlar. Uzun bir zaman boyunca gına getiren, sürekli yavaşlığı ve “her yüzüne bakışımızda...

2 ay önce. 55 0 Devam Et

Sitelerinize WhatsApp Butonu Ekleyerek Müşterilerinizle Etkileşime Geçin

Merhaba arkadaşlar. WhatsApp günün hemen her anında iletişim ihtiyacımızı karşılayan olmazsa olmaz bir araç h...

2 ay önce. 62 0 Devam Et

İşletmelerde Ön Muhasebe Yazılımı Kullanmanın Önemi ve Bulut Tabanlı Yazılımlar

Merhaba arkadaşlar. Özellikle son zamanlarda girişimcilik ruhunun çok fazla kişiye ulaştığını, herkesin özell...

2 ay önce. 23 0 Devam Et

Material Design Icons – MDI ile Sitelerinize Icon Set Nasıl Eklenir

Selam arkadaşlar. Bu yazıda sitelerimizi daha doğrusu arayüzlerimizi hazırlarken Material Design Icon Set’ind...

2 ay önce. 23 0 Devam Et

SSD Disk Kullanmak Bilgisayarımızı Ne Kadar Hızlandırır?

Solid State diskler piyasa çıktığından beri bilgisayar satıcıları hatta elindeki ikinci el bilgisayarı satan in...

2 ay önce. 40 0 Devam Et

Hakkımda

1994'ün Haziran'ında Beyşehir/Konya'da dünyaya gelmişim. O zamanlar, gerek tombikliğim gerek yeşil gözlülüğüm sebebiyle gören herkes tarafından el üzerinde ( hatta defalarca havaya atılıp tutulma gibi ) tutulmuşum.

Bebekliğim Konya'da bir köyde, çocukluğum İstanbul'da geçti. İstanbul'da başladığım iş hayatına doğduğum yer, Beyşehir'de devam ediyorum.

Uzun yıllar çeşitli firmalarda çalıştıktan sonra 2017’den beri kendi yazılım ve reklam şirketimi kurdum. Geliştirmeye ve değiştirmeye devam ediyoruz.