Blogger

Blogger ve WordPress’te Font Awesome ikonları nasıl eklenir?

Font Awesome ikonları bloğunuza oldukça güzel ve profesyonel bir görünüm verirler. Bloğunuzun performansını etkilemediği için oldukça kullanışlıdır.

Font Awesome Nedir?

Font Awesome size yüzlerce farklı ikon seçeneği sunan, bu ikonların boyutlandırılması, renkleri, gölge efektleri ve css ile yapılan her türlü düzenlemeyi ücretsiz olarak yapmanızı sağlayan bir platformdur.

Neden Font Awesome Kullanmalıyım?

  • Resim dosyaları yerine düzenlenebilir ve boyutlandırılabilir vektör dosyaları kullanmak sayfanızdaki yükü azaltacak ve daha hızlı açılmasını sağlayacaktır.
  • Yüzlerce ücretsiz ikon desteği
  • Css desteği

Font Awesome ikonları nasıl eklenir?

Şablon mesünüden HTML’yi düzenle sekmesine tıklıyoruz. Gelen kod bloğundan </head> kodunu CTRL+F tuş kombinasyonuyla aratıp buluyoruz. Ve hemen üzerine aşağıdaki kodu ekliyoruz.

Font Awesome ikonları nasıl eklenir blogger kod ekleme

Eğer css dosyasını maxcdn üzerinden değilde kendi Google Drive hesabınızdan yüklemek isterseniz Blogger css ve javascript dosyalarını Google Drive üzerinden çalıştırmak konulu makaleye göz atabilirsiniz.

Font Awesome İkonlarını Kullanmak

Gerekli css kodunu ekledikten sonra düzenleme kısmına geçebiliriz. Aşağıda örnek bir kod bloğu veriyorum ve hemen altında nasıl çalıştığını açıklayalım.

Üst kodlar içerisinde toplam 8 adet sosyal medya ikonu bulunmaktadır. URL yazan kısımlara ilgili sosyal medya sitesinin linkini eklediğinizde aslında işlemi tamamlamış oluyoruz.

FontAwesome inline olarak sayfanızda istediğiniz yerde kullanabilirsiniz. Bunun için “fa” css sınıfı ile “<i>” etiketleri arasında kullanmak yeterlidir.

Daha basit bir örnek ile açıklayalım. Buradan ikonların olduğu listeyi açalım. Ve kullanmak istediğimiz ikonun üzerine tıklayıp ikon sayfasını açalım.

Font Awesome ikonları nasıl eklenir ikon seçimi

İkon detay sayfasına aşağıdaki gibi bir kod göreceğiz. Bu kodu direk olarak sayfanıza eklediğinizde ikon görünecektir.

Font Awesome ikonları nasıl eklenir ikon boyutu

İkonun farklı boyutları bulunmaktadır. Varsayılan olarak en küçük boyutu eklemektedir. Eğerfarklı boyutlarda ikonları kullanmak isterseniz ilgili boyuta ait kodu eklemeniz yeterlidir.

Font Awesome ikonları nasıl eklenir ikon boyut seçimi

Örneğin;

  • En küçük boy için : <i class=”fa fa-home” aria-hidden=”true”></i> (Varsayılan olarak en küçüğü gösterir)
  • En büyük boy için : <i class=”fa fa-home fa-6x” aria-hidden=”true”></i>

WordPress’te Font Awesome İkonları Nasıl Eklenir?

Kullanım şekli WordPress içinde aynı şekildedir. İkon eklemek istediğiniz menü içerisine ilgili kodu eklemek yeterlidir.

WordPress menüler kısmına aşağıdaki gibi eklemek istediğiniz ikona ait kodu yerleştirip kaydedin.

Font Awesome ikonları nasıl eklenir wordpress menü ekleme

Aşağıdaki gibi ikonumuzu eklemiş oluyoruz.

Font Awesome ikonları nasıl eklenir wordpress menü sonuç

Elbette Font Awesome kullanımı örnekleri bu kadar ile sınırlı değil. Bootstrap ve Css3 örnekleri ve kullanımları da mevcut. Diğer örnekler için Font Awesome Örnekleri sayfasına bakabilirsiniz.

Yazar Hakkında

Sadri

Wordpress,Seo,Blogging,Blogger ve Sosyal Medya konularında makaleler yazmakta ve Seo Danışmanlığı yapmaktayım.

1 Yorum

Yorum yapmak ister misin?

Abonelik Seçenekleri
Konuya abone olarak yeni yorumlardan yada cevaplardan haberdar olabilirsiniz.

E-Mail Bülteni Aboneliği

 

E-Mail bülteni aboneliği ile en yeni makalelerden anında haberdar olabilirsiniz. Her yeni makale yayınlandığında e-posta kutunuzda makaleye ait detayları bulabileceksiniz. 

Teşekkürler. Lütfen Posta Kutunuzu Kontrol Edin

Pin It on Pinterest