WordPress sitenize simge yazı tipleri eklemek mi istiyorsunuz?
Simge yazı tipleri yeniden boyutlandırılabilir ve tıpkı web yazı tipleri gibi yüklenir, bu nedenle web sitenizi yavaşlatmazlar. Hatta tam olarak istediğiniz görünümü elde etmek için CSS kullanarak onları şekillendirebilirsiniz.
Bu makalede, WordPress temanıza simge yazı tiplerini nasıl kolayca ekleyebileceğinizi göstereceğiz.
Simge Yazı Tipleri Nedir ve Neden Kullanmalısınız?
Simge yazı tipleri harf ve rakamlar yerine semboller veya küçük resimler içerir.
Bu simge yazı tiplerini birçok farklı şekilde kullanabilirsiniz. Örneğin, bunları alışveriş sepetinizde, indirme düğmelerinde, özellik kutularında, hediye yarışmalarında ve hatta WordPress gezinme menülerinde kullanabilirsiniz.
Aslında WordPress, yönetici alanında yazı tipi simgeleri kullanır.
Çoğu ziyaretçi yaygın olarak kullanılan bir simgenin ne anlama geldiğini hemen anlayacaktır, böylece sitenizde gezinmeyi kolaylaştırabilirler. Ayrıca, çoğu insan hangi dili konuşursa konuşsun ortak simge yazı tiplerini anlayacağından, çok dilli bir web sitesi oluşturmanıza da yardımcı olabilirler.
Görüntü tabanlı simgelerle karşılaştırıldığında, yazı tipi simgeleri çok daha hızlı yüklenir, böylece WordPress hızını ve performansını artırabilirler.
Ücretsiz olarak kullanabileceğiniz birkaç açık kaynaklı simge yazı tipi seti vardı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. Doğrudan kullanmak istediğiniz yönteme geçmek için hızlı bağlantıları kullanmanız yeterlidir:
Yöntem 1. WordPress Eklentisi Kullanarak Simge Yazı Tipleri Ekleme (Kolay)
WordPress’e özel simge yazı tipleri eklemenin en kolay yolu Font Awesome eklentisini kullanmaktır.
Bu eklenti, WordPress tema dosyalarınızı değiştirmeden sayfalarınızda ve yazılarınızda ücretsiz simge yazı tiplerini kullanmanıza olanak tanır. Ayrıca eklentiyi her güncellediğinizde yeni Font Awesome simgelerini otomatik olarak alırsınız.
Yapmanız gereken ilk şey Font Awesome’ı WordPress’e eklemek. Daha fazla ayrıntı için WordPress eklentisinin nasıl yükleneceğine ilişkin adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, herhangi bir kısa kod bloğuna bir Font Awesome simgesi ekleyebilirsiniz. Simge yazı tipini göstermek istediğiniz sayfayı veya yazıyı açmanız ve ardından ‘+’ simgesine tıklamanız yeterlidir.
Artık ‘Kısa kod’ için arama yapabilir ve karşınıza çıktığında doğru bloğu seçebilirsiniz.
Bunu yaptıktan sonra, aşağıdaki kısa kodu kullanarak herhangi bir Font Awesome simgesi ekleyebilirsiniz:
[icon name="rocket"]
“Roket” yerine göstermek istediğiniz simgenin adını yazmanız yeterlidir. Adı almak için Font Awesome kütüphanesine gidin ve kullanmak istediğiniz simgeye tıklayın.
Görüntülenen açılır pencerede, devam edin ve simgenin adına tıklayın.
Font Awesome artık adı otomatik olarak panonuza kopyalayacaktır.
Bunu yaptıktan sonra, adı kısa koda yapıştırmanız yeterlidir. Simge yazı tipini canlı hale getirmek için artık ‘Yayınla’ veya ‘Güncelle’ye tıklayabilirsiniz.
Bazen bir metin bloğu içinde bir simge yazı tipi göstermek isteyebilirsiniz. Örneğin, bir marka adından sonra bir ‘telif hakkı’ simgesi görüntülemeniz gerekebilir.
Bunu yapmak için kısa kodu herhangi bir Paragraf bloğunun içine yapıştırmanız yeterlidir.
Daha sonra, metin blokları için seçenekleri nasıl özelleştirdiğinize benzer şekilde, simgeyi özelleştirmek için sağ taraftaki menüdeki ayarları kullanabilirsiniz. Örneğin, WordPress‘te yazı tipi boyutunu ve arka plan rengini 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 widget’a hazır herhangi bir 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 lütfen WordPress kenar çubuğu widget’larınızda kısa kodların nasıl kullanılacağına ilişkin kılavuzumuza bakın.
Hatta ikon kısa kodunu sütunlara ekleyebilir ve güzel özellik kutuları oluşturabilirsiniz.
Ayrıntılı talimatlar için WordPress’te simgeli özellik kutularının nasıl ekleneceğine ilişkin kılavuzumuza bakın.
Birçok web sitesi, ziyaretçilerin yollarını bulmalarına yardımcı olmak için menülerinde simge yazı tipleri kullanır. Simge eklemek için yeni bir menü oluşturun ya da WordPress kontrol panelinde mevcut bir menüyü açın.
Adım adım talimatlar için WordPress’te gezinme menüsü eklemeye ilişkin başlangıç kılavuzumuza 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ı’nın yanındaki kutuyu işaretleyin.
Bunu yaptıktan sonra, simgeyi göstermek istediğiniz menü öğesini genişletmek için tıklamanız yeterlidir.
Şimdi 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 bulup tıklamanız yeterlidir. İ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ı basitçe tırnak işaretleri arasındaki metindir. Örneğin, aşağıdaki görüntüde CSS sınıfı fa-solid fa-address-book şeklindedir.
Tırnak içindeki metni kopyalayıp WordPress kontrol paneline geri dönmeniz yeterlidir.
Şimdi metni ‘CSS Sınıfları’ alanına yapıştırabilirsiniz.
Daha fazla simge yazı tipi eklemek için yukarıda açıklanan aynı işlemi uygulamanız yeterlidir.
Menünün nasıl ayarlandığından memnun olduğunuzda, ‘Kaydet’e tıklayın. Şimdi, WordPress web sitenizi ziyaret ederseniz, güncellenmiş gezinme menüsünü göreceksiniz.
Yöntem 2. SeedProd ile Simge Yazı Tiplerini Kullanma (Daha Özelleştirilebilir)
Yazı tipi simgelerini sitenizin herhangi bir yerinde kullanma özgürlüğü istiyorsanız, bir sayfa oluşturucu eklentisi kullanmanızı öneririz.
SeedProd piyasadaki en iyi sürükle-bırak WordPress sayfa oluşturucusudur ve 1400’den fazla Font Awesome ikonuna sahiptir. Ayrıca sürükle ve bırak yöntemini kullanarak herhangi bir sayfaya ekleyebileceğiniz hazır bir Simge bloğuna sahiptir.
SeedProd ile istediğiniz web sitesi tasarımına uygun özel bir WordPress teması da oluşturabilirsiniz.
Yapmanız gereken ilk şey eklentiyi yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki başlangıç kılavuzumuza bakın.
Not: SeedProd’un ücretsiz bir sürümü var, ancak Simge bloğu ile birlikte geldiği için Pro sürümünü kullanacağız.
Etkinleştirmenin ardından 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, devam edin ve ‘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 için temel olarak kullanmak üzere bir şablon seçebilirsiniz. SeedProd, WordPress blogunuzun veya web sitenizin ihtiyaçlarına göre özelleştirebileceğiniz 300’den fazla profesyonelce tasarlanmış şablona sahiptir.
Bir şablon seçmek için farenizi üzerine getirin ve ardından ‘Onay İşareti’ simgesine tıklayın.
Dijital ürün satışı için mükemmel olduğu için tüm görsellerimizde ‘E-kitap Satış Sayfası’ şablonunu kullanıyoruz. Ancak siz istediğiniz tasarımı kullanabilirsiniz.
Ardından, devam edin ve ö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 olduğunuzda, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklayın.
Ardından, şablonu özelleştirebileceğiniz SeedProd sürükle ve bırak sayfa oluşturucusuna yönlendirileceksiniz.
SeedProd editörü, sağda tasarımınızın canlı bir önizlemesini ve solda bazı blok ayarlarını gösterir.
Sol taraftaki menüde ayrıca tasarımınıza sürükleyebileceğiniz bloklar 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ü artık o bloğu özelleştirmek için kullanabileceğiniz tüm ayarları gösterecektir. Örneğin, genellikle arka plan renklerini değiştirebilir, arka plan resimleri ekleyebilir veya markanıza daha iyi uyması için renk düzenini ve yazı tiplerini değiştirebilirsiniz.
Sayfaya bir simge yazı tipi eklemek için sol sütunda ‘Simge’ bloğunu bulmanız ve ardından düzeninize sürüklemeniz yeterlidir.
SeedProd varsayılan olarak bir ‘ok’ simgesi gösterecektir.
Bunun yerine farklı bir Font Awesome simgesi göstermek için Simge bloğunu seçmek üzere tıklamanız yeterlidir.
Sol taraftaki menüde, farenizi simgenin üzerine getirin ve göründüğünde ‘Simge Kitaplığı’ düğmesine tıklayın.
Şimdi aralarından seçim yapabileceğiniz tüm farklı Font Awesome simgelerini göreceksiniz.
Kullanmak istediğiniz yazı tipi simgesini bulup tıklamanız yeterlidir.
SeedProd şimdi simgeyi düzeninize ekleyecektir.
Bir simge seçtikten sonra, sol taraftaki menüde bulunan ayarları kullanarak simgenin hizalamasını, rengini ve boyutunu değiştirebilirsiniz.
Sol taraftaki menüde yer alan ‘Bağlantı’ alanına yazarak yazı tipi simgesine bir bağlantı da ekleyebilirsiniz.
Bir başka seçenek de SeedProd’un hazır Simge Kutusunu kullanmaktır.
Bu, bazı metinleri yazmanıza ve ardından yanında bir yazı tipi simgesi göstermenize olanak tanır, bu da onu özellik kutuları için mükemmel bir seçim haline getirir.
Sol taraftaki menüde Simge Kutusunu bulun ve düzeninize sürükleyin.
Daha sonra 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 aralığını ve metin rengini değiştirebilir, CSS animasyonları ekleyebilir ve daha fazlasını yapabilirsiniz.
Daha fazla blok ekleyerek ve sol taraftaki menüde bu blokları özelleştirerek sayfa üzerinde çalışmaya devam edebilirsiniz.
Sayfanın görünümünden memnun olduğunuzda ‘Kaydet’ düğmesine tıklayın. Daha sonra bu sayfayı canlı hale getirmek için ‘Yayınla’yı seçebilirsiniz.
Alternatif: SVG Simgeleri Kullanın
WordPress’e simge görselleri eklemenin bir başka yolu da SVG simgeleri kullanmaktır. Ölçeklenebilir vektör formatının kısaltması olan bu format, vektör grafikleri için yaygın olarak kullanılan bir görüntü 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 yüklenmek için diğer resim simgelerine göre daha az sunucu isteği gerektirdiği bilinmektedir.
SVG hakkında daha fazla bilgi edinmek istiyorsanız, WordPress’te SVG görüntü dosyalarının nasıl ekleneceğine ilişkin adım adım kılavuzumuza göz atabilirsiniz.
Umarız bu eğitim WordPress temanıza simge yazı tiplerini nasıl ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca en iyi popup eklentilerinin karşılaştırılması ve en iyi web tasarım yazılımının nasıl seçileceği hakkındaki rehberimizi de inceleyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Shraddha Patil says
Very Helpful! I was searching for such solutions. Glad I found it here. Thank you!!
WPBeginner Support says
Glad our guide was helpful
Yönetici
Juan says
Hi there, many thanks for suych a great explanation.
But I don´t understand something.
On the wp_enqueue_style() function, the first parameter is a string called ‘wpb-fa’. I looked on the documentation and it is supposed to be the name of the stylesheet. But I don´t understand. What is this name for? Is mandatory to be named that way in this case? The stylesheet isn´t named “style.css”?
Sorry for the noob questions.
Thanks
WPBeginner Support says
The wpb-fa is the unique name for the script, that section is not for the name of the stylesheet
Yönetici
M. Hridoy says
Hi,
This is Great! Thanks for your awesome resourceful worth reading post.Indeed a timely and useful post which I could pick up some valuable information on this subject. Keep updating new suggestions with us…
WPBeginner Support says
Thank you and you’re welcome
Yönetici
drkumar kumar says
nice article , thanks for sharing
WPBeginner Support says
Thank you, glad you liked our article
Yönetici
Niranjan G Vala says
Hello wp beginners support team, I am visually impaired web designer.
Have read this whole artical but still want some help regarding integrating the font icons in my website.
I want to use Font Awesome with my theme. and already followed the steps provided above in artical.
The icons are working in post and pages vary fine but i want to use it in menus.
Here what I have done with css.
.shoppingcart::before {
font-family: FontAwesome;
content: “\f07a”;
color: #ffffff;
}
But still it didn’t worked. Then what I have done wrong?
Please assist me out of this problem.
I will always appreciate.
Vary Thank you all at wp beginners.
WPBeginner Support says
Hi Niranjan,
An easier way to add Font Awesome is to add its CSS classes to invidual menu items. After enqueuing font stylesheet.
Go to Appearance » Menus page and click on Screen Options button. From there make sure that CSS Classes check box is checked.
Next click to expand an individual menu item and you will notice the option to add CSS classes. Each font-awesome icon has its own CSS class for exmaple, fa fa-lg fa-home CSS classes will be used for home icon. You can find them all on Font Awesome website.
After adding CSS class you can use those classes in your custom CSS to style the icons.
Yönetici
Niranjan G Vala says
First thanks to all at WP Beginners for your valuable response. And sorry for late feedback. Unfortunately I was not able to reply quickly because the mail was in the spam folder. Now it works fine and i’m able to use font awesome in navigation menus.
One suggestion is that please mention the accessibility level of plugins/themes when you post an artical. WordPress core is fully accessible but 60% of plugins and themes are not following the web accessibility guidelines (WCAG 2.0) witch is the recommendation of world wide web consortium (w3.org). Or please add skip links on your website for better accessibility. Making websites accessible will help lot to persons with disabilities like myself to navigate the website lot easier. Thanks.
ripon says
in a website there should have font awesome icon. I want to make that dynamic. I want to change that icon from wordpress control panel. like why choose us section there should have responsive design font icon. I want to change that from wordpress theme option.
Tobias says
Hi, awesome tutorial, thank you!
Can you help me?
I used this line of the code “-o-transform: scale(1);” to scale my icons in Opera properly, however it didn’t help me. Maybe it is because of specifically these icons, that I am using –
Is it possible that something is wrong with them? What do you think? And thanks for your tutorial!
valldahi says
Thank you very much Isy. methode 1
Nrusingh Pr Acharya says
Thanks for this method. I inserted FA manually because better is not in support anymore with WP v4.7.
I am following your tutorials from first, and I’m pretty much confident in WordPress now. Thanks.
zeniwo says
A very informative article , it really helped me in clearing my doubts about adding icon fonts in wordpress themes . Bloggers like you help hundreds of new and budding bloggers like me to understand things and move ahead . Thank you very much for this useful article.
WPBeginner Support says
Glad you found it helpful
Yönetici
Rhonda says
Thank you! I’ve been trying to understand how to use the font icons and this was straight forward and helpful.
WPBeginner Support says
Glad you found it helpful
Yönetici
Kobe says
Thanks for this post. It was really useful. I’ve been using Better Fonts Awesome plugin and it helped me much. But then I needed to form my content into responsive columns and I started to search for plugin that will allow me to do that. Accidentally I came across MotoPress Editor. Actually I do not like visual editors due to dependency on them but it saved me as I could form the columns visually and use Font Awesome Icons, selecting sizes and colors easily. Thank you again for good job.