bent-font-awesome

Bent Font Awesome ile Simgeler Nasıl Eklenir?

Hiç şüphe yok ki biz wordpress meraklıları çok görsellik meraklısı olduğumuzu biliyoruz, ve bu nedenle, sadece içeriğe değil, aynı zamanda bir web sitesinin görsel tasarımına odaklanıyoruz.

Geleneksel olarak, web tasarımcıları ve geliştiricileri, herhangi bir web sitesinde simgeler eklemek için görüntüleri ve görüntü spritlerini kullanmayı seviyorlar.

Bu simgeler daha sonra web sitesi genelinde görsel bir iyileştirme olarak kullanılmak için tercih edilebiliyor, gezinme menüsünde, arama çubuğunda, kaydırıcılarda simge yüklemek ve benzeri.

Bununla birlikte, bu yöntem kadar uygun, birkaç dezavantaja da sahipti. Duyarlı tasarım ortaya çıktığında, bu görüntüler kesik veya daha da kötüsü tamamen bulanık görünmesine neden olan bu zayıf noktalar belirginleşti.

Bu sorunun cevabı font simgeleridir. Web sitenizin tasarımına bir miktar ekleme yapan tamamen duyarlı ve özelleştirilebilir simgeleri görüntülerler. Aslında bunlar simgelerden yapılmış fontlardır.

Böyle bir font FontAwesome’dur. Ve bugün, WordPress web sitenize FontAwesome simgelerini nasıl kolayca ekleyeceğinizi göstereceğim.

Powered by WP Review

Neler öğreneceksiniz?

  • Hangi simge fontları ve bunları niçin kullanmalısınız?
  • Eklentileri kullanarak WordPress’e simge fontları ekleme
  • WordPress’e simge fontları manuel olarak nasıl eklenir?

Simge yazı tipleri nedir ve bunları neden kullanmalısınız?

Simge yazı tiplerinde harfler ve rakamlar yerine semboller veya simgeler bulunur. CSS kullanarak kolayca yeniden boyutlandırılabilirler ve daha önce kullanılan resim spritlerinin tersine, sayfa yükleme sürenizi artıracaklardır.

Bunları gezinme menülerinize, özellik kutularınıza, yayın başlıklarına ve daha fazlasına simgeler eklemek için kullanabilirsiniz.

Görsel görünüm dışında bir simge font kullanmanızın çeşitli nedenleri vardır:

  • Yazı Tipi Simgeleri tamamen duyarlıdır – Temelde vektör dosyalarıdır, bu da kaliteyi kaybetmeden herhangi bir boyuta ölçekleyebilmeleri anlamına gelir.
  • Yazı Tipi Simgelerinin stilleri, konumları ve manipüle edilebilirleri – Yazı tipleri olduklarından geleneksel bir yazı tipi ile aynı şekilde değiştirilebilir. Rengini ayarlayın, üzerine gelindiğinde stillerini değiştirin, hizalamalarını denetleyin, boyutlarını ayarlayın ve daha pek çok şey yapın.
  • Yazı Tipi Simgelerinin çapraz tarayıcı uyumlu olması ve bunlardan bol miktarı var.
  • Tasarımcılar bu simgeler üzerinde çok fazla saat harcadı ve sıklıkla güncelleniyor ve en iyi deneyimi sunmayı hedefliyor.

WordPress web sitenize FontAwesome eklemenin iki yolu vardır ve biz her iki yöntemi de inceleyeceğiz. İlk yöntem bir eklenti kullanmayı ve ikinci yöntem ise fontu manuel olarak eklemektir.

1 – Eklentileri kullanarak WordPress’e simge fontları ekleme

Bir eklenti kullanmak, web sitenize herhangi bir yazı tipi simgesi eklemenin en kolay metodu. Bu örnekte , yazı tipini web sitesine eklemek için Font Awesome eklentisini kullanacağız.

1. Yükleme ve etkinleştirme

Yapmanız gereken ilk şey Better Font Awesome eklentisini yükleyip etkinleştirmektir.

Kontrol panelinize gidin ve ardından Eklentiler> Yeni Ekle> Hemen yükle>

Son olarak eklentiyi etkinleştirin. Etkinleştirme sonrasında, Eklenti ayarlarını yapılandırmak için Ayarlar> Font Awesome sayfasını ziyaret edebilirsiniz. Çoğu durumda eklenti kutudan çıktığı için gerekli değildir, dolayısıyla orada herhangi bir şey değiştirmeniz gerekmez.

Hiç şüphe yok ki insanlar çok görsel varlıklardır. Ve bu nedenle, sadece içeriğe değil, aynı zamanda bir web sitesinin görsel tasarımına odaklanıyoruz.

Geleneksel olarak, web tasarımcıları ve geliştiricileri, herhangi bir web sitesinde simgeler eklemek için görüntüleri ve görüntü spritlerini kullandılar.

Bu simgeler daha sonra web sitesi genelinde görsel bir iyileştirme olarak kullanıldı – gezinme menüsünde, arama çubuğunda, kaydırıcılarda simge yüklemek ve benzeri.

Bununla birlikte, bu yöntem kadar uygun, birkaç dezavantaja da sahipti. Duyarlı tasarım ortaya çıktığında, bu görüntüler kesik veya daha da kötüsü tamamen bulanık görünmesine neden olan bu zayıf noktalar belirginleşti.

Bu sorunun cevabı font simgeleridir. Web sitenizin tasarımına bir miktar ekleme yapan tamamen duyarlı ve özelleştirilebilir simgeleri görüntülerler. Aslında bunlar simgelerden yapılmış fontlardır.

Böyle bir font FontAwesome’dur. Ve bugün, WordPress web sitenize FontAwesome simgelerini nasıl kolayca ekleyeceğinizi göstereceğim.

2. Yazı tipi simgelerinizi ekleme

Better Font Awesome, çeşitli kısa kodları kullanarak yazı tipi simgeleri eklemenizi sağlar,

  • [icon name=”binoculars”]
  • [icon name=”gift”]
  • [icon name=”map”]

Simgeler, posta editörüne sadece arzu edilen simgeyi seçerek de eklenebilir. Şimdi yeni bir yayın oluştursaydınız, gönderim düzenleyicisinde yeni bir simge olduğunu fark edeceksiniz. Üzerine tıklayıp, bir simge bulup yerleştirebileceğiniz bir açılır pencere açar.

Better-Font-Awesome-icon
Better-Font-Awesome-icon

3. Yazı tipi simgelerinizi özelleştirme

Eklenti, yayınınıza bir kısa kod ekleyecek ve simgeyi daha da özelleştirmek istiyorsanız, kendi CSS sınıfını ekleyerek ve ardından stil sayfanıza belirli stilleri girerek bunu yapabilirsiniz.

Varsayılan shortcode şöyle görünür;

[icon name=”coffee” class=”” unprefixed_class=””]

Stil amaçları için bir sınıf ekledikten sonra şöyle görünür;

[Icon name = “kahve” class = “” unprefixed_class = “”]

Stil amaçları için bir sınıf ekledikten sonra şöyle görünür;

[icon name=”coffee” class=”mycoffeeicon” unprefixed_class=””]

Stil yapmak için Görünüm> Editör’e gidin ve temanızın stil sayfasını açın. Şu satırları ekleyin:

i.fa.fa-coffee.fa-mycoffeeicon {
 
font-size:100px;
 
color:#ba1157;
 
}

Bu kadar basit.

2 – WordPress’de simge fontları manuel olarak ekleme

Simge yazı tipleri, simgelerden oluşan yazı tiplerinden başka bir şey değildir. Bu şekilde herhangi bir özel yazı tipi eklediğiniz gibi kolayca eklenebilirler. FontAwesome gibi bazı simge fontlar web üzerindeki CDN sunucularından edinilebilir ve doğrudan WordPress temanızdan bağlanabilir.

Ayrıca tüm font dizinini WordPress temanızdaki bir klasöre yükleyebilir ve daha sonra stil sayfanızdaki bu fontları kullanabilirsiniz.

Her iki yöntemi de burada ele alalım.

Yöntem 1 – Temanızın header.php dosyasına kod ekleme

En kolay yöntem, temanızın header.php dosyasında, </ head> etiketinin hemen öncesinde bir satır eklemektir.

&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /&gt;

Bu en kolay yöntem olmasına rağmen, gerçekten doğru WordPress yolu değil ve diğer eklentilerle çakışmalara neden olabilir. Çok daha iyi bir yaklaşım, stylesheet’i functions.php dosyanız aracılığıyla WordPress’e düzgün şekilde sıkıştırmaktır.

Görünüm> Editör’e tıklayın ve ardından functions.php dosyanızı seçin. Sonunda aşağıdaki satırları ekleyin:

function ala_load_fa() {
 
wp_enqueue_style( 'ala-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

İşiniz bittiğinde dosyayı güncelle üzerine tıklayın.

Yöntem 2 – WordPress temanızın dizinine yazı tipi simgeleri ekleyin

İkinci yöntem, simgenizi temanıza kolaylıkla eklemenize izin verir ve bir miktar ayak izi içerir. Önce, simge fontunu indirmeniz ve paketi unzip indirmeniz gerekiyor. Ardından, FTP üzerinden web sitenize bağlanmak için FileZilla gibi bir program kullanın.

WordPress temanızın dizinine gidin, yeni bir klasör oluşturun ve yazı tipleri veya fontawesome olarak adlandırın.

Ardından, simge yazı tiplerinin içeriğini yeni oluşturduğunuz klasöre yükleyin.

Bu yapıldığında, yazı tiplerini WordPress temanıza eklemeniz gerekecek. Bu kodu temanın functions.php dosyasına ekleyin.

function ala_load_fa() {
 
wp_enqueue_style( 'ala-fa', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.min.css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'ala_load_fa' );

Güncelleme dosyasına tıklayın ve FontAwesome’u WordPress temanıza başarıyla yükleyeceksiniz.

Son bölüm aslında WordPress temanıza, yayınlarınıza veya sayfalarınıza simgeler ekliyor.

Bunu simgelemek istediğiniz herhangi bir yere simge adını ekleyerek manuel olarak yapabilirsiniz.

Kullanılabilir simgelerin tam listesini görmek için Font Awesome web sitesine gidin. Kullanmak istediğiniz herhangi bir simgeyi tıklayın, simge adını görebilirsiniz. Simge adını kopyalamak için Kopyala’yı tıklayın ve daha sonra yayın veya sayfa düzenleyicisine ekleyin:

<i class="fa-coffee"></i>

Ayrıca stil sayfasındaki simgeyi yukarıda yaptığımız gibi özelleştirebilirsiniz.

Ayrıca farklı simgeleri bir araya getirebilir ve aynı anda stilleyebilirsiniz. Bu, örneğin yanındaki simgelerle bir bağlantı listesi oluşturmasını isterseniz kullanışlıdır. Sadece bunları aşağıdaki gibi belirli bir sınıfa sahip bir div öğesinin altına sarmalayın.

<div class="my-icons">
<a class="icons-group-item" href="#"><i class="fa fa-apple fa-fw"></i>Home</a>
<a class="icons-group-item" href="#"><i class="fa fa-bars fa-fw"></i>Library</a>
<a class="icons-group-item" href="#"><i class="fa fa-asterisk fa-fw"></i>Applications</a>
<a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

Artık onları temanın stil sayfasında şu şekilde stil edebilirsiniz:

.icons-group-item i {
 
color: #333;
 
font-size: 50px;
 
}
 
.icons-group-item i:hover {
 
color: #ba1157;
 
}

Önceki makalemizde Dashicons‘u WordPress’e nasıl ekleyeceğinizi ve bunları nasıl kullanacağınızı gösterdik. Font Awesome ekleme oldukça benzerdir. Web sitenizi daha ilginç hale getirmenin harika bir yoludur ve simge yazı tiplerini kullanmanın pek çok yolu vardır.

Bunları gezinme menüsünü stil oluşturmak için veya başlıklara eklemek için kullanabilirsiniz. Önemli bir şeye dikkat çekmek istediğinizde bunları yazılarınızın içinde kullanabilirsiniz.
Widget’lar HTML girdisini kabul ettiği için bunları widget’larınıza bile ekleyebilirsiniz. Zarf simgesi eklediyseniz bülten widget’ınızın ne kadar daha fazla olabileceğini düşünün. Ya da bir yazar kutusu kullanırsanız, sosyal medya profillerinizi görüntülemek için Font Awesome’u kullanabilirsiniz.

En iyi yanı, hangi cihazın veya ziyaretçinizin hangi tarayıcıyı kullandığından bağımsız olarak, her zaman keskin, duyarlı simgeleri görebilecek olmalarıdır.

Kısa Özet
Yayın Tarihi
Konunun Adı
Bent Font Awesome ile Simgeler Nasıl Eklenir?
Verilen Puan
51star1star1star1star1star

Leave a Reply

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