WordPress Web Sitenizde Harika Yazı Tipi Nasıl Kullanılır

Bir vektör simgesi veya statik bir görüntü kullanma seçeneği verildiğinde, vektörü kullanmak iyi bir fikirdir. Küçük ve hızlı yüklenirler ve çözünürlük kaybı olmadan herhangi bir boyuta ölçeklenebilirler. Font Awesome, web sitelerinizde kullanabileceğiniz harika bir vektör simgeleri kitaplığıdır ve muhtemelen ihtiyacınız olan hemen hemen her şekle veya markaya sahiptirler. Ve hepsinden iyisi? Bedava. En iyi ikinci, kolay.

Youtube Kanalımıza Abone Olun

Yazı Tipi Harika WordPress Simgeleri

WordPress sitenizde Font Awesome kitaplığını kullanmak nispeten zahmetsizdir. Bu basit adımları izledikten sonra, sayfa yükleme sürenizi azaltabilecek ve işinizin bir parçası olarak bu simgeleri kullanarak gerçekten temiz, canlı tasarımlar oluşturabileceksiniz.

Hatırlanması gereken bir şey, (çoğu zaman) Font Awesome simgelerinin sitenize gerçek fontlar olarak teslim edileceğidir. Bu nedenle Font Awesome adı. @font-face ve Font Awesome font-family aracılığıyla CSS kullanarak, normalde bir font karakterinin yapabileceği şekilde bunları stillendirebilir ve değiştirebilirsiniz.

Bu nedenle, her bir tarayıcı veya görünüm alanı için boyutlandırma veya boşluk bırakma konusunda endişelenmenize gerek kalmayacak. Kulağa harika geliyorsa, çünkü öyle. Ve işte bunu nasıl yapıyorsunuz:

Font Awesome'i Yükleme

Font Awesome'i kurmanın ve kullanmanın manuel bir yolu olsa da, WordPress kullanıcıları için daha iyi bir yol var. FA'deki iyi insanlar resmi bir Font Awesome WordPress eklentisi yayınladı ve güzel çalışıyor.

Eklenti yüklenip etkinleştirildiğinde, artık HTML parçacıklarının yanı sıra [[icon name]] kısa koduna da erişebilirsiniz. Kullanışlı züppe FA simgesi listesini tuttuğunuz sürece, tam olarak hangi simgeye ihtiyacınız olduğunu bilirsiniz. Eklentinin ayarlar sayfasında ( Ayarlar – Harika Yazı Tipi altında bulunur) varsayılan olarak işlerin nasıl ayarlandığını göreceksiniz. Genel olarak, bunları saklamak ve kullanmak iyidir. Çoğu insanın başka bir şeye ihtiyacı olmayacak.

Yöntem seçeneği çoğu insan için muhtemelen en önemlisidir. Webfont veya SVG arasında geçiş yapabilirsiniz. SVG size daha fazla güç ve özellik (güç dönüşümleri ve maskeleme gibi) verirken, Font Awesome CDN, simgeleri bir yazı tipi olarak değil SVG dosyaları olarak sunar. Bu bazı yönlerden daha iyi olsa da, SVG pek çok tarayıcı tarafından tanınmaz ve WordPress her zaman SVG görüntüleri ile iyi oynamaz. Bu yüzden webfont sürümüyle güvenli oynamanızı öneririz.

Bu konuda Font Awesome de öyle: Farktan emin değilseniz veya neden SVG kullanmanız gerektiğini bilmiyorsanız, varsayılan webfont yöntemine bağlı kalmak muhtemelen en kolayıdır.

WordPress sitenizde Font Awesome simgelerini kullanmak çok basit. Bir simgenin görünmesini istediğiniz herhangi bir yere <i class=”fab fa-wordpress”></i> eklemeniz yeterlidir . Hangi adı gireceğinizi öğrenmek için simge kitaplığını kontrol ettiğinizden emin olun.

Not: Eklentideki kısa kodlar isabetlidir. Bazı simgeler mükemmel şekilde işlenirken diğerleri boş görünüyor. Kısa kodun sizin için çalıştığını görmedikçe HTML eklemesine bağlı kalmanızı öneririz. Yukarıdaki WordPress örneğinin bir örneği için aşağıya bakın, kamera simgesi varken.

Ve işin bitti. Font Awesome WordPress eklentisi, aksi takdirde gerekli kodu eklemek için temalarına veya dosyalarına girmekten çekinen kişiler için harikadır. Ancak, bunu yapmakta rahatsanız, Font Awesome simgelerini sitenize almak için bu talimatları uygulayabilirsiniz.

Font Müthiş Simgelerini Manuel Olarak Yükleme

Yapmanız gereken ilk şey Font Awesome web sitesine gitmek. Oradan, Ücretsiz Kullanmaya Başla düğmesine tıklayın. Yüksek trafiğe sahip siteleri olan ve kurumsal bir çözüme ihtiyaç duyan kişiler için ücretli planlar sunuyorlar, ancak genel halk ücretsiz sürümden kurtulabilir. Ücretsiz olarak 1.500 simge ve Pro planında 5.000'den fazla varyant elde edersiniz.

Bir sonraki adım, basitçe kopyala/yapıştır yapmaktır. Ancak, daha önce tartıştığımız gibi, web yazı tipi seçeneğini vurguladığınızdan emin olmak isteyeceksiniz.

Çoğu temanın sitenin <head> bölümüne otomatik olarak kod ekleyebileceğiniz bir yeri vardır. Divi'nin durumunda, örneğin, Tema Seçenekleri – Entegrasyonlar'a gider ve bu kodu Add code to the Head of your blog yazan alana yapıştırırsınız.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Kaydet'e bastığınızda, yukarıda yaptığımız gibi istediğiniz simgelerden herhangi birini eklemeye başlayabilirsiniz. Sadece, bunu yaparak kısa koda erişiminiz olmaz .

Temanız Kod Entegrasyonunu Desteklemiyorsa

Temanızda böyle bir nokta bulamazsanız, manuel olarak yapmak da aynı derecede kolaydır. Bununla birlikte, bunu yapmak için temanızın Çekirdek dosyalarını incelemeniz gerekecek, ancak bu çok hızlı bir kopyala/yapıştırdır ve (genellikle) yapması oldukça güvenlidir. WP panonuzda Görünüm – Düzenleyici'ye gidin ve header.php dosyasını bulun.

</head> ' in yazıldığı satırı bulun ve ondan önce aynı kodu Font Awesome'den yapıştırmanız gerekir. Dosyayı Güncelle'ye basın ve FA simgelerini hemen kullanmaya başlayabileceksiniz. Yine, Font Awesome'i bu şekilde yükleyerek kısa kod alamazsınız.

Ayrıca, bir tema dosyasını her düzenlediğinizde, bir alt tema kullanmak istediğinizi unutmayın. Bunu yaparak, tema güncellendiğinde yaptığınız değişikliklerin üzerine yazılmasını önlersiniz.

Kurulum için Daha Fazla Seçenek

Ve eğer Font Awesome için başka, daha özel ihtiyaçlarınız varsa, kitaplığa erişim için çeşitli yollar sunarlar. NPM ve Yarn kurulumlarından Sketch ve React entegrasyonuna kadar, WordPress'ten daha fazlasına ihtiyacınız varsa, bir ton seçeneğe sahiptirler.

Stil Yazı Tipi Harika Simgeler

Artık onları yüklediğinize göre, simgeleri açmanın zamanı geldi. Simgelerin her biri bir CSS sınıfı tarafından yönetildiğinden, bunu CSS kullanarak yapabilirsiniz. En sık kullanılan iki stil renk ve boyuttur. CSS stilini stil sayfalarınıza dahil edebilir veya satır içinde yapabilirsiniz. Genel olarak, satır içi stili kullanmak isteyebilirsiniz, çünkü bunun gibi simgeler tüm sitede evrensel olma eğiliminde değildir.

Font Awesome web sitesinde bunun nasıl yapılacağına dair örnekler vardır. Kendi iglo simgelerini ve belirli bir boyut için fa-xs veya fa-xl veya fa-2x gibi ek sınıfları kullanarak boyutlandırmayı gösterirler.

Ek olarak, simgenin belirli bir boyuta göre olmasına ihtiyacınız varsa ve mutlak değerler işe yaramazsa, kendi kısıtlamalarınız dahilinde çalışması için onu kendi <div> içine yerleştirebilirsiniz.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Toplama

Ve bu kadar! Harika, değil mi? İster Font Awesome WordPress eklentisini kullanın, ister kodu manuel olarak ekleyin, sitenizi çalışır duruma getirmek birkaç adımdan fazla sürmez. Font Awesome bir sebepten dolayı popülerdir ve bunun bir kısmı kullanım kolaylığından gelir. Öyleyse dışarı çık ve harika ol!

Font Awesome simgelerini kullanmanın en sevdiğiniz yolu nedir?

Makalede öne çıkan görsel, Font Awesome'in izniyle