WordPress Menüye Nasıl İkon Eklenir?

Bugünkü yazımızda sizlere WordPress sitenizdeki menüye nasıl ikon ekleneceğini göstereceğim. WordPress ikon ekleme işlemi son derece basittir. WordPress icon ekleme işlemi için yazımızı okuyabilirsiniz.

Günümüzün en yaygın blog yazılımlarından biri olan WordPress, geniş yelpazesi sayesinde e-ticaret de dahil olmak üzere birçok sitenin altyapı ihtiyacını gidermektedir. Kendisi için topluluk tarafından kodlanmış birçok ücretli / ücretsiz eklenti ve tema da barındıran WordPress, geliştirmeye de oldukça müsait bir yazılımdır.

Bugünkü yazımızda sizlere WordPress sitenizdeki menüye nasıl ikon ekleyebileceğinizi göstereceğim. Aynı sistem Webinsan Blog – Web’deki İnsan! adresimizde de kullanılmaktadır. Siteye herhangi bir etkisi olmasa da görüntü açısından güzel durmaktadır.

wordpress ikon

İkonları Nasıl Ekleyeceğim?

Eğer WordPress tabanlı sitenizdeki menü kısmına ikon eklemek istiyosanız aşağıdaki adımları takip etmeniz gerekmektedir. Son derece basit bir işlemdir.

  1. Temanızın Font Awesome desteğini kontrol edin. Kontrol etmek için Görünüm -> Tema Düzenleyici yolunu izleyin. Kendi temanızı seçtikten sonra düzenlenecek dosya olarak alt kısmı (footer.php) veya üst kısmı (header.php) seçin. Buradaki kaynak kodlar içinde font-awesome ile alakalı bir şey bulursanız temanız destekliyor demektir, direkt 3. adıma atlayabilirsiniz.
  2. Eğer temanız desteklemiyorsa Font Awesome sitesi üzerinden yeni kit oluşturmanız gerekmektedir. Bunu sitesi üzerinden gerçekleştirebilirsiniz. Sitesine erişmek için tıklayın. Kiti oluşturduktan sonra size verilecek cdn kodunu sitenin footer kısmına eklediğiniz takdirde siteniz artık font-awesome destekleyecektir.
  3. Kodu ekledikten sonra site üzerinden istediğiniz ikonları beğenip kodunu Görünüm -> Menüler kısmından istediğiniz yere ekleyebilirsiniz. Örneğin <i class="fa fa-home"></i>Ana Sayfa olarak eklediğiniz zaman Ana Sayfa yazısının önünde bir ev ikonu olacaktır.
  4. Son olarak kodu eklerken kendi sürümünüze uygun kodu eklemeniz gerekmektedir. Son sürüm kodlarına ulaşmak için tıklayınız. Eğer kodu nasıl elde edeceğinizi bilmiyorsanız aşağıyı okuyabilirsiniz.

Font Awesome İkon Kodu Nasıl Alınır?

İkon kodunu almak son derece basit bir işlemdir. Öncelikle bu bağlantı üzerinden ikon listesine erişiyoruz. Ardından istediğimiz ikonu seçiyoruz. İkonu seçtikten sonra Start Using This Icon butonuna tıklıyoruz. Tıkladıktan sonra karşımıza kodu çıkacaktır. Eğer sürümünüz farklıysa url çubuğunda yapacağınız ufak değişiklerle kendi sürümünüzün koduna ulaşabilirsiniz.

https://fontawesome.com/v6.0/icons/500px

Koyu fontlu yere kendi sürümünüzü yazmanız gerekmektedir. Örneğin sürümünüz 5.15 ise orayı v5.15 olarak güncellerseniz kendiniz için olan kullanımı görebilirsiniz.

font awesome kod

UNUTMAYIN!! Eski sürümler tüm ikonları desteklemeyebiliyor, bu yüzden son sürümünü kullanmanızı tavsiye ediyorum. Font Awesome yerine SVG ikonlar da kullanabilirsiniz ancak bunu başka bir yazımıza anlatacağım 🙂 Görüşmek üzere

 

Eğer kodları eklerken bir sorun yaşarsanız yorum üzerinden bizimle iletişime geçebilirsiniz.

Webinsan Blog - Web'deki İnsan! Kurucusu & Yöneticisi.

Bir cevap yazın

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