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?

[su_divider top=”no” divider_color=”#dedede” size=”5″][/su_divider]

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?

[su_divider top=”no” divider_color=”#dedede” size=”5″][/su_divider]

Ş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.

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

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

[su_divider top=”no” divider_color=”#dedede” size=”5″][/su_divider]

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.

<div id="fawesomeicons">
<a href="URL" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="URL" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a> 
<a href="URL" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>

Ü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.

<i class="fa fa-plane" aria-hidden="true"></i>

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.

İ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.

<i class="fa fa-home" aria-hidden="true"></i>

İ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.

Ö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?

[su_divider top=”no” divider_color=”#dedede” size=”5″][/su_divider]

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.

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

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.