Ana İçeriğe Geç

WordPress tema üzerinde simgeler, yazı tipleri nasıl eklenir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

WordPress blogunuza yazı tipi simgeleri eklemek ister misiniz? Bu tatil sezonunda, herkes daha iyi bir görüntü sunmak için bloglarını daha fazla özelleştirmek istiyor. Yazı tipleri simgeleri, düzenli olarak yapılan düzenlemelerin bir parçasıdır.

Bu eğitici yazıda, WordPress blogunuza yazı tipi simgelerinin nasıl ekleneceğini göstereceğim.

iconfontswp-1

Yazı tipi simgelerinde küçük hassasiyet

Simge yazı tipleri, harfler ve sayılar yerine simgeler veya semboller içerir. Bu piktogramlar, sayfalarınızın boyutunu önemli ölçüde etkilemeden CSS kodu ile kolayca yeniden boyutlandırılabilir.

icomoon

Simge yazı tipleri, oldukça yaygın sembolleri görüntülemek için kullanılabilir. Klasik bir web sitesinde, alışveriş sepeti simgesini görüntülemek, düğmeleri, sürgüleri, sosyal medya düğmelerini ve hatta WordPress gezinme menülerini indirmek için kullanabilirsiniz.

Farklı seçeneklere sahip çeşitli yazı tipi simgeleri bulunmaktadır. Aslında, her WordPress kurulumunda Dashicons, yazı tipleri kümesidir. Bu simgeler gösterge panosu kullanıcı çubuğunda kullanılır.

İşte bazı font ikonları projeleri:

Bu ders için en çok kullanılan ve ücretsiz font simgelerinden biri olan Font Awesome'i kullanacağım.

WordPress temanıza yazı tipi simgeleri eklemeyi keşfedeceğiz. İlk yöntem bir eklenti kullanılarak yapılır ve ayrıca bir eklenti olmadan nasıl yapılacağını göstereceğiz.

WordPress eklentisi ile font simgeleri nasıl eklenir

FontAwesome birkaç eklenti tarafından desteklenir. Eklentiyi kullanmak, kaynak kodunu değiştirmeden temanıza kolayca bir font simgesi eklemenizi sağlar.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Yapmanız gereken ilk şey, eklentiyi yüklemek ve etkinleştirmek. Daha iyi Yazı Müthiş, WordPress.org adresinde mevcuttur. Eklentiyi etkinleştirdikten sonra, aşağıdaki konuma gitmelisiniz: " Ayarlar> Daha İyi Yazı Tipleri", Eklentiyi yapılandırmak için. Ancak, bu eklenti konfigürasyon olmadan çalışabilir, bu nedenle kullanıcıların gerçekten hiçbir şeyi değiştirmelerine gerek yoktur.

betterfontawesome

Bu eklenti, font simgelerini aşağıdaki gibi eklemenizi sağlar:

[simge adı = »roket»]

[simge adı = "bulut"]

[simge adı = »kulaklık»]

Makale düzenleme arayüzüne, mevcut simgeler arasından seçim yaparak simgeler ekleyebilirsiniz. Sadece yeni bir yazı oluşturun, ikonu göreceksiniz " Takın Simge Düğme Görsel editörün araç çubuğunda.

Üzerine tıklamak, bir simgeyi bulabileceğiniz ve yerleştirebileceğiniz yeni bir pencere açacaktır.

fa-posteditor

Eklentinin buna benzer bir düğme ekleyeceğini göreceksiniz:

[simge adı = »üniversite» sınıf = »» unprefixed_class = »»]

Daha fazla özelleştirme seçeneği eklemek istiyorsanız, özel bir stil için kendi sınıfınızı ekleyebilirsiniz.

[icon name = "university" class = "sınıfım" unprefixed_class = ""] İşte simgenizin sınıfını nasıl özelleştireceğiniz:

.fa-myclass {yazı tipi boyutu: 100px; Renk: #FF6600; } 

Bu gerçekten basit. Sınıftan önce "fa" ile geldiğini fark ettin. CSS koduna eklemeyi unutmayın.

WordPress'te bir simge yazı tipi manuel olarak nasıl eklenir

Bu rehberde daha önce belirtildiği gibi, blogunuza elle nasıl bir simge yazı tipi ekleyeceğinizi göstereceğim.

Font Awesome gibi bazı font simgeleri, dünyadaki CDN sunucuları üzerinden kullanılabilir ve doğrudan blogunuza bağlanabilir.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Bu yazı tipi simgesinin dosyalarını doğrudan WordPress temanızın klasörüne de gönderebilirsiniz. Blogunuza Font Awesome yazı tipi simgesini nasıl ekleyeceğinizi göstereceğim.

İlk yöntem:

Bu en basit yöntemdir. Bu satırı temanızın "<head>" bölümüne ekleyin (genellikle header.php dosyasındadır).

<Bağlantı rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Bu yöntem basittir, ancak diğer eklentilerle çok fazla çatışmaya neden olabilir. En iyi yaklaşım, komut dosyalarını kuyruğa eklemek için WordPress'ten yüklemektir.

wp_load_fa fonksiyonu () {wp_enqueue_style ( 'WPB-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); } ADD_ACTION ( 'wp_enqueue_scripts', 'wp_load_fa');

İkinci yöntem:

İkinci yöntem en basit değildir, ancak temanızda simge fontları olmasına izin verir. Yapmanız gereken tek şey font-icon paketinizi indirip açmak (sıkıştırılmış dosya) klasörde "Yazı tipleri" Temanın

Sadece yazı tipi simgesini indirin ve yeniden adlandırın. Bundan sonra yapmanız gereken ikon yazı tipini sunucunuzdan yüklemek.

FTPUpload

Artık WordPress temanıza font simgelerini yüklemeye hazır olduğunuza göre, aşağıdaki kodu dosyaya eklemeniz yeterlidir " functions.php WordPress temanızda veya telefonunuzda WordPress Plugin.

wp_load_fa fonksiyonu () {wp_enqueue_style ( 'WPB-fa', get_stylesheet_directory_uri () '/fonts/css/font-awesome.min.css.'); } ADD_ACTION ( 'wp_enqueue_scripts', 'wp_load_fa');

Hepsi bu kadar.

Blogunuzdaki yazı tipi simgeleri el ile nasıl görüntülenir?

Font Awesome bloguna gidin ve mevcut fontların listesini görün. Herhangi bir resmin üzerine tıkladığınızda resmin kodunu göreceksiniz.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Ücretsiz]

fa-optinmonster

Basitçe kopyalayıp yapıştırın ve aşağıdaki kodu:

<i sınıf="Fa-optin-canavar"> </i>

Metin editörü modunda. Yazı tipi simgesinde değişiklik yapmak için sınıfı kullanabilirsiniz.

CSS hakkında daha fazla bilgiye ihtiyacınız olursa, sizi davet ediyorum Bu eğitimde okumak. Bu eğitim için bu kadar. En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşmaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse2
cıvıltı
Enregistrer2