WordPress Temanıza İkon Fontlarını Kolayca Nasıl Eklersiniz

Simgeler için normal resim dosyaları kullanan WordPress web sitelerine baktığımızda, daha iyi bir şeyi kaçırdıklarını düşünmeden edemiyoruz.

Bunun nedeni, simge yazı tiplerinin daha akıllı bir seçim olmasıdır; daha hızlı yüklenirler, herhangi bir ekranda daha keskin görünürler ve sadece birkaç tıklamayla boyutlarını veya renklerini kolayca değiştirebilirsiniz.

Birçok web sitesi sahibi, daha kolay seçenekler hakkında bilgi sahibi olmadıkları için hala eski moda resim simgeleri kullanıyor. Modern simge yazı tipleri sayesinde artık sitenize yavaşlatmadan harika görünen simgeler ekleyebilirsiniz.

Bu kılavuzda, WordPress temanıza simge yazı tipleri eklemenin en basit yollarını göstereceğiz. Bu yöntemleri kendimiz test ettik ve kullandığınız herhangi bir tema ile harika çalışıyorlar.

Simgeli Yazı Tipleri Nedir ve Neden Kullanmalısınız?

Simge yazı tipleri, harfler ve sayılar yerine semboller veya küçük resimler içerir.

Bu simge yazı tiplerini birçok farklı şekilde kullanabilirsiniz. Örneğin, alışveriş sepetiniz, indirme düğmeleriniz, özellik kutularınız, çekiliş yarışmalarınız ve hatta WordPress gezinme menülerinizle kullanabilirsiniz.

Aslında, WordPress yönetici alanında yazı tipi simgeleri kullanır.

Ziyaretçilerin çoğu yaygın olarak kullanılan bir simgenin ne anlama geldiğini hemen anlayacaktır, bu da sitenizi gezinmeyi kolaylaştırır. Ayrıca çok dilli bir web sitesi oluşturmanıza yardımcı olabilirler, çünkü çoğu insan hangi dili konuşurlarsa konuşsunlar yaygın simge yazı tiplerini anlayacaktır.

Görüntü tabanlı simgelere kıyasla, yazı tipi simgeleri çok daha hızlı yüklenir, bu nedenle WordPress hızını ve performansını artırabilir.

Ücretsiz olarak kullanabileceğiniz birkaç açık kaynaklı simge yazı tipi seti bulunmaktadır, ancak bu kılavuzda, en popüler açık kaynaklı simge seti olduğu için Font Awesome kullanacağız.

Bununla birlikte, WordPress temanıza simge yazı tiplerini nasıl kolayca ekleyebileceğinize bakalım. Kullanmak istediğiniz yönteme doğrudan atlamak için hızlı bağlantıları kullanmanız yeterlidir:

• Yöntem 1. WordPress Eklentisi Kullanarak Simge Yazı Tipleri Ekleme (Ücretsiz ve Kolay)
• Method 2. Using Icon Fonts with SeedProd (More Customizable)

Yöntem 1. WordPress Eklentisi Kullanarak Simge Yazı Tipleri Ekleme (Ücretsiz ve Kolay)

Özel simge yazı tiplerini WordPress'e eklemenin en kolay yolu Font Awesome eklentisini kullanmaktır.

Bu eklenti, WordPress temanızın dosyalarını değiştirmeden sayfalarınızda ve gönderilerinizde ücretsiz simge yazı tipleri kullanmanıza olanak tanır. Ayrıca eklentiyi her güncellediğinizde otomatik olarak yeni Font Awesome simgeleri de alacaksınız.

Yapmanız gereken ilk şey Font Awesome'ı WordPress'e eklemektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, herhangi bir kısa kod bloğuna bir Font Awesome simgesi ekleyebilirsiniz. Simgeli yazı tipini göstermek istediğiniz sayfa veya gönderiyi açın ve ardından ‘+’ simgesine tıklayın.

Artık ‘Kısa Kod’ araması yapabilir ve göründüğünde doğru bloğu seçebilirsiniz.

Bu işlem bittikten sonra, aşağıdaki kısa kodunu kullanarak herhangi bir Font Awesome simgesi ekleyebilirsiniz:

[icon name="rocket"]

Göstermek istediğiniz simgenin adıyla “roket” kelimesini değiştirmeniz yeterlidir. Adı almak için Font Awesome kütüphanesine gidin ve kullanmak istediğiniz simgeye tıklayın.

Görünen açılır pencerede, simgeye tıklayın.

Font Awesome artık adı otomatik olarak panonuza kopyalayacaktır.

Bu işlem bittikten sonra, adı kısa koda yapıştırmanız yeterlidir. Simgenin canlı hale gelmesi için şimdi ‘Yayınla’ veya ‘Güncelle’ye tıklayabilirsiniz.

Bazen, bir metin bloğunun içine bir simge yazı tipi göstermek isteyebilirsiniz. Örneğin, bir marka adından sonra bir 'telif hakkı' sembolü görüntülemeniz gerekebilir.

Bunu yapmak için, kısa kodu herhangi bir Paragraf bloğunun içine yapıştırmanız yeterlidir.

Ardından, metin blokları için seçenekleri özelleştirmenize benzer şekilde, simgeyi özelleştirmek için sağdaki menüdeki ayarları kullanabilirsiniz. Örneğin, metin rengini, yazı tipi boyutunu ve arka plan rengini WordPress'te değiştirebilirsiniz.

WordPress, kısa kodu bir Font Awesome simgesine dönüştürecek ve metninizin yanında gösterecektir.

Başka bir seçenek de kısa kodu herhangi bir widget'a hazır alana eklemektir.

Örneğin, sitenizin kenar çubuğuna veya benzer bir bölüme bir Kısa Kod bloğu ekleyebilirsiniz.

Daha fazla bilgi için, WordPress kenar çubuğu widget'larınızda kısa kodları nasıl kullanacağınıza dair rehberimize bakın.

Sütunlara simge kısa kodunu ekleyebilir ve güzel özellik kutuları oluşturabilirsiniz.

WordPress'te simgelerle özellik kutuları ekleme kılavuzumuza nasıl ekleneceği hakkında ayrıntılı talimatlar için bakın.

Birçok web sitesi, ziyaretçilerin gezinmesine yardımcı olmak için menülerinde simge yazı tipleri kullanır. Bir simge eklemek için WordPress kontrol panelinde yeni bir menü oluşturun veya mevcut bir menüyü açın.

Adım adım talimatlar için, WordPress'e nasıl navigasyon menüsü ekleyeceğinizle ilgili başlangıç kılavuzumuza buradan göz atın.

Görünüm » Menüler sayfasında, ‘Ekran Seçenekleri’ne tıklayın ve ardından ‘CSS Sınıfları’ kutusunu işaretleyin.

Bu işlem bittikten sonra, simgenin görünmesini istediğiniz menü öğesini genişletmek için tıklamanız yeterlidir.

Artık yeni bir ‘CSS Sınıfları’ alanı görmelisiniz.

Bir simgenin CSS sınıfını almak için Font Awesome web sitesinde simge yazı tipini bulun ve üzerine tıklayın. İsterseniz, farklı ayarlara tıklayarak simgenin stilini değiştirebilirsiniz.

Açılır pencerede bir HTML kod parçacığı göreceksiniz. CSS sınıfı, tırnak işaretleri arasındaki metindir. Örneğin, aşağıdaki resimde CSS sınıfı fa-solid fa-address-book.

Tırnak içindeki metni kopyalayın, ardından WordPress panosuna geri dönün.

Metni şimdi 'CSS Sınıfları' alanına yapıştırabilirsiniz.

Daha fazla simge yazı tipi eklemek için yukarıda açıklanan süreci izlemeniz yeterlidir.

Menü kurulumundan memnun kaldığınızda, ‘Kaydet’e tıklayın. Şimdi, WordPress web sitenizi ziyaret ederseniz, güncellenmiş gezinme menüsünü göreceksiniz.

Yöntem 2. SeedProd ile Yazı Tipi Simgeleri Kullanma (Daha Özelleştirilebilir)

Sitenizin herhangi bir yerinde yazı tipi simgelerini kullanma özgürlüğüne sahip olmak istiyorsanız, sayfa oluşturucu eklentisi kullanmanızı öneririz.

SeedProd, piyasadaki en iyi sürükle ve bırak WordPress sayfa oluşturucusudur ve yerleşik olarak 1400'den fazla Font Awesome simgesine sahiptir. Ayrıca sürükle ve bırak yöntemiyle herhangi bir sayfaya ekleyebileceğiniz hazır bir Simgeler bloğuna sahiptir.

İş ortağı markalarımızdan birkaçı tüm web sitelerini bununla oluşturdu ve harika deneyimler yaşadılar. Ayrıntılar için SeedProd incelememize bakın.

Yapmanız gereken ilk şey eklentiyi kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisini yeni başlayanlar için adım adım nasıl kuracağınıza dair başlangıç kılavuzumuza bakın.

Etkinleştirdikten sonra SeedProd » Ayarlar bölümüne gidin ve lisans anahtarınızı girin.

Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz. Lisans anahtarını girdikten sonra 'Anahtarı Doğrula' düğmesine tıklayın.

Ardından, SeedProd » Sayfalar'ı ziyaret etmeniz ve ‘Yeni Açılış Sayfası Ekle’ düğmesine tıklamanız gerekir.

Şimdi, sayfanızın temeli olarak kullanmak üzere bir şablon seçebilirsiniz. SeedProd, WordPress blogunuzun veya web sitenizin ihtiyaçlarına göre özelleştirebileceğiniz 350'den fazla profesyonelce tasarlanmış şablona sahiptir.

Örneğin, kullanıcıları etkileşimde tutmak için viral bir bekleme listesi açılış sayfası, bir sıkıştırma sayfası veya özel bir 404 hata sayfası oluşturabilirsiniz.

Bir şablon seçmek için fareyi üzerine getirin ve ardından ‘Onay İşareti’ simgesine tıklayın.

Tüm görsellerimizde ‘E-kitap Satış Sayfası’ şablonunu kullanıyoruz, çünkü dijital ürün satmak için mükemmeldir. Ancak, istediğiniz herhangi bir tasarımı kullanabilirsiniz.

Ardından, özel sayfa için bir ad yazın. SeedProd, sayfanın başlığına göre otomatik olarak bir URL oluşturacaktır, ancak bu URL'yi istediğiniz herhangi bir şeyle değiştirebilirsiniz.

Girdiğiniz bilgilerden memnun kaldığınızda, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklayın.

Ardından, şablonu özelleştirebileceğiniz SeedProd sürükle-bırak sayfa oluşturucusuna yönlendirileceksiniz.

SeedProd düzenleyicisi, sağ tarafta tasarımınızın canlı bir önizlemesini ve sol tarafta bazı blok ayarlarını gösterir.

Sol taraftaki menüde ayrıca tasarımınıza sürükleyebileceğiniz bloklar da bulunur.

Düğmeler ve resimler gibi standart blokları sürükleyip bırakabilir veya iletişim formu, geri sayım, sosyal medya paylaşım düğmeleri ve daha fazlası gibi gelişmiş blokları kullanabilirsiniz.

Herhangi bir bloğu özelleştirmek için düzeninizde seçmek üzere tıklamanız yeterlidir.

Sol taraftaki menü, o bloğu özelleştirmek için kullanabileceğiniz tüm ayarları gösterecektir. Örneğin, arka plan renklerini değiştirebilir, arka plan resimleri ekleyebilir veya markanıza daha iyi uyum sağlaması için renk şemasını ve yazı tiplerini değiştirebilirsiniz.

Sayfaya bir simgeli yazı tipi eklemek için, sol sütundaki ‘Simgeli’ bloğu bulun ve düzeninize sürükleyin.

SeedProd varsayılan olarak bir 'ok' simgesi gösterecektir.

Farklı bir Font Awesome simgesi göstermek için simge bloğunu seçmek üzere tıklamanız yeterlidir.

Sol taraftaki menüde, fareyi simgenin üzerine getirin ve göründüğünde 'Simge Kitaplığı' düğmesine tıklayın.

Artık seçebileceğiniz tüm farklı Font Awesome simgelerini göreceksiniz.

Kullanmak istediğiniz yazı tipi simgesini bulun ve üzerine tıklayın.

SeedProd şimdi simgeyi düzeninize ekleyecektir.

Bir simge seçtikten sonra, sol taraftaki menüdeki ayarları kullanarak hizalamasını, rengini ve boyutunu değiştirebilirsiniz.

Ayrıca, sol taraftaki menüdeki 'Bağlantı' alanına yazarak font simgesine bir bağlantı ekleyebilirsiniz.

Başka bir seçenek de SeedProd'un hazır Simgeli Kutu'sunu kullanmaktır.

Bu, bir metin yazmanıza ve yanına bir yazı tipi simgesi göstermenize olanak tanır, bu da onu özellik kutuları için harika bir seçenek haline getirir.

Sadece sol menüdeki Simge Kutusu'nu bulun ve düzeninize sürükleyin.

Ardından bloğu seçmek için tıklayabilir ve yukarıda açıklanan aynı işlemi izleyerek simgeyi değiştirebilirsiniz.

Bundan sonra, başlık ve gövde metnini yazabilirsiniz.

Ayrıca, ‘Gelişmiş’ sekmesini seçerek bloğun dolgu ve kenar boşluğunu değiştirebilir, CSS animasyonları ekleyebilir ve daha fazlasını yapabilirsiniz.

Sol menüde daha fazla blok ekleyerek ve bu blokları özelleştirerek sayfada çalışmaya devam edebilirsiniz.

Sayfanın görünümünden memnun kaldığınızda 'Kaydet' düğmesine tıklayın. Ardından sayfayı canlı hale getirmek için 'Yayınla'yı seçebilirsiniz.

Alternatif: SVG Simgeleri Kullanın

WordPress'e simge resimleri eklemenin bir başka yolu da SVG simgeleri kullanmaktır. Ölçeklenebilir vektör formatının kısaltması olan SVG, vektör grafikleri için yaygın olarak kullanılan bir resim formatıdır.

Birçok kişi, simgelerine birden fazla renk eklemek istediklerinde simge yazı tipleri yerine SVG vektör simgelerini kullanır. Bu dosyaların aynı zamanda daha SEO dostu olduğu ve diğer resim simgelerine göre yüklenmesi için daha az sunucu isteği gerektirdiği bilinmektedir.

SVG hakkında daha fazla bilgi edinmek isterseniz, WordPress'e SVG görüntü dosyaları ekleme hakkındaki adım adım kılavuzumuza göz atabilirsiniz.

Umarım bu eğitim, WordPress temanıza simge yazı tipleri eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca en iyi WordPress tema oluşturucuları ve WordPress temanızda yazı tiplerini nasıl değiştireceğiniz hakkındaki rehberimize de göz atabilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.