WordPress ile yazı tipi simgeleri aşılayın ve kullanın

Resim iyi, ancak web siteleri için zorluklar sunuyor: ek HTTP istekleri gerektiriyor, dosya ağırlığı ekleme ve düzgün bir şekilde açıklanamıyor. Yazı tipi simgeleri ise, herhangi bir boyut simgesini ayarlamak, herhangi bir görünüm veya çözünürlükte harika görünmek için yalnızca bir HTTP isteği gerektirir ve [korumalı e -posta]## dağıtır. Birçok WordPress teması artık varsayılan yirmi on üç tema, yirmi on dört ve yirmi on beş de dahil olmak üzere yazı tipi simgeleri kullanıyor. Bakalım neden onu kullanmanız ve nerede bulacağınız. Neden simge yazı tipleri kullanıyorsunuz? Simge yazı tipi, metin yerine bir piktogram kullanır ve metin gibi CSS efektini uygulayarak isteğe bağlı olarak düzenlenebilir. Güzelliği, güçlü bir görünümün – güçlü bir kombinasyonun her boyutunda keskin kalırken birçok bireysel tasarıma ayarlanabilmeleridir.

Yazı tipi simgeleri: Sosyal simgeler, web sitesi simgeleri, ne düşünebilirseniz – sadece bir resim değil. Çeşitli görüntülerle ve yeniden yükleme dosyalarıyla oynadığınız yarım hafta geçirmek yerine, bir dizi esnek temel seçenekte akıllı tasarım kararları vermeye odaklanabilirsiniz. Yazı tipi simgeleri genellikle iki temel işlev için kullanılır: metni mükemmelleştirmek ve işlevsel veya bilgi amaçlı tek başına durmak.
Bir simge yazı tipi kullanmak, sitenize ek bir anında görsel parlatma katmanı ekleyebilir. İşte simge yazı tipiniz yüklendikten sonra yapabileceğiniz bazı harika şeyler:
Rengi İstediğiniz her şeye değiştirin
Gölgeyi kolayca ekleyin ve ayarlayın
Çizikler, gradyanlar ve dokular ekleyin
Pürüzsüz ve çekici bir animasyon yaratın
Şeffaf CO’dan yararlanın
Çapraz tarayıcı desteğini kullanmak için opaklık veya rotasyonu ayarlama gibi standart efektler uygulayın
Site hızını artırın ve yüklenmesi gereken varlık miktarını azaltın
Tüm bunlar, doğal simge yazı tipi formatlarının bir kombinasyonu ve CSS iyiliği serpme ile elde edildi. İyi bir anlaşma gibi geliyor, değil mi?
Yazı tipi simgeleri nerede bulunur “Yazı tipi simgesi” için basit bir Google araması yapın ve görünen birçok seçenek tarafından kandırılabilirsiniz. Sıralamada ilk adımı vermek için, aramanıza ücretsiz bir karışım ve premium simge yazı tipi sağlayıcılarımızla başlayın:
Özel ve keskin simge yazı tipleri. Icomoon Icomoon’a gider ve bir dizi genel hedef simgesini veya yüksek kaliteli çizgi simgelerini ücretsiz olarak alabilir veya premium seçeneklerinden biriyle kendinizi şımartabilirsiniz. Özel simgeler oluşturmayı ve indirmeyi çok kolaylaştıran sezgisel uygulamalar da vardır.

“İkonik yazı tipi ve CSS araç seti.” Amazing yazı tipi, başlangıçta ticari kullanım için ücretsiz olarak boşaltılabilen ve herhangi bir CSS ile düzenlenebilen 500’den fazla vektör simgesinden oluşan bir koleksiyon olan Bootstrap ile kullanılmak üzere tasarlanmıştır. Müthiş yazı tipi simgesi ayrıca retina ekranlarında çarpıcı görünecek şekilde tasarlanmıştır ve ekran okuyucusunu tökezlemez.

Zurb’a göre, sağ CSS ve işaretlemenin birkaç satırı kısa sürede size yardımcı olacaktır. Foundation Icon Font 2 Zurb, genel ikonlar, sosyal ve iyi erişilebilirlik koleksiyonu içeren kullanımı için ücretsiz bir simge seti sağlar. Çok kolay erişilebilir olmaları kodlanmıştır ve hemen kullanmaya başlamak için doğru olan küçük bir CSS ve işaretleme gerektirir.

Fontello – Ikon yazı tipi üreticisi. Fontello Fontello, indirmek istediğiniz bir vektör görüntü özel paketi hızlı bir şekilde seçmek için kullanabileceğiniz harika bir küçük araçtır. Fontello’ya seçtiğiniz tüm simgeleri sürükleyin ve çıkarın. Yüklendikten sonra, ikon yazı tipi simginizin simgesinde saniyeler içinde görünecektir. Fontastic 9.000’den fazla mevcut simgeye sahip Fontastic, sadece birkaç saniye içinde kendi simge yazı tiplerinizi yapmanızı sağlar. İkonunuzu SVG Sprite olarak bile yayınlayabilirsiniz. Yalnızca bir tıklama yayınlayabilirsiniz ve yaptığınız her değişiklik doğrudan sunucularıyla senkronize edilir. Çok kolay.

Arayüz simgesi dikkatle yapılır. Pictos görüntüsü, çok iyi görünen yüksek kaliteli bir simge yazı tipi seti satın almaya hazırsanız dikkate alınması gereken bir görüntüdür. Her satın alma, daha fazla ayarlamayı kolaylaştırmak için AI, EPS, SVG ve Sketch gibi çeşitli genel formatlarda kaynak dosyaları içerir.

Yukarıdaki sitelerin çoğu, simge yazı tiplerini başlatmanıza ve çalıştırmanıza yardımcı olmak için talimatlar, öğreticiler ve kendi SSS bölümlerini sağlar. Uygulamak için gereken adımlar, sağlayıcının sağlayıcıya karmaşıklığı açısından değişecektir. WP SVG simgesi eklentisini kullanarak her şeyin basit kalması (ve siteniz için hızlı, kolay ve ücretsiz seçenekler sunar), aşağıdaki yükleme ipuçlarımızı göstermek için ücretsiz WP SVG simgeleri eklentisini kullanacağız. Bu eklenti, kısa bir kod kullanarak sitenizde kolayca ekleyebileceğiniz 490’dan fazla simgeye erişmenizi sağlar.

Icomoon gibi diğer kaynaklardan özel simgeler çekmek için içe aktarma eklentisi işlevini bile kullanabilirsiniz. WP SVG simgelerini indirip yükledikten sonra WP SVG simgesi eklentisiyle ne elde edersiniz, WP SVG simgeleri etiketli yönetici menünüzün altına yeni bir sekme görünecektir. Fareyi üzerine yönlendirdiğinizde, dört sekme daha görünecektir: Varsayılan simge ayarlayın: Bu, simgeyi seçebileceğiniz ana sekmedir, sitenizdeki herhangi bir yere eklemek için kısa kodu sarmak ve kopyalamak istediğiniz öğeleri seçin. Bu bölümlerin tümü doğrudan bir sonraki bölümde göreceğimiz sayfaya ve yayın düzenleyicisine oluşturulmuştur.
Özel simge seti: IComoon’u özel bir simge paketi için kullanmaya karar verirseniz, bu, sitenizde görüntülenmek için içe aktarmak için kullanacağınız sekmedir.
Ayarlar: Bu eklenti, oynamak için çok fazla ayar olmaması için mümkün olduğunca basit ve heyecan verici tasarlanmıştır. Varsayılan simgeyi yüklemek, varsayılan simge öğesini seçmek isteyip istemediğinizi seçebilir ve yüklemeyi kaldırırsanız tüm verileri silmek isteyip istemediğinize karar verebilirsiniz.
Yükseltme: Bu, sizi bu makalenin sonuna daha yakın tartışacağımız eklentinin premium sürümüne götürür.
Simge yazı tipini gönderi ve sayfa eklentinize sabitlemek WP SVG simgeleri, simgeyi yayınınıza veya sayfanıza koymanızı çok kolaylaştırır. Ancak bunu yapmadan önce, bir simgenin görünmesini istediğiniz doğru alanındaki imlecleri tıkladığınızdan emin olun – örneğin iki paragraf arasında veya altyazıların yanında.
Düzenleme ekranında veya sayfadaysanız, görsel düzenleyicinin/metnin hemen üstünde, simgeyi ekleyin.
Üzerine tıkladıktan sonra, varsayılan simge kümesi sekmesi altında bulduğunuz seçeneği gösteren bir pencere açılır. Bu, kısa kod simgesini, editörden çıkıp kopyalamak ve herhangi bir zamanda kısa bir kod eklemek zorunda kalmadan doğrudan yayınınıza veya sayfanıza girmenizi kolaylaştırır. Üstteki eleman düğmesini kullanarak, H1, H2, H3, Span, Div, I veya B’ye sarılmış bir simge isteyip istemediğinizi seçebilirsiniz. Eklentinin yalnızca bir seferde bir öğe seçmenize izin vereceğini unutmayın.
Kısa kodunuz oluşturulur ve Mavi düğmesini tıkladığınızda simgeyi takar düğmenize veya sayfanıza yerleştirilir. Bu, editörde kısa bir kod olarak görüntülenir, ancak bir konsept olarak saklayarak ve önizleme düğmesine basarak simginizin nasıl olduğunu görebilirsiniz. Widget alanınızdaki yazı tipi simgelerini aşılayın, WP SVG simgeleri eklentisi tüm simgeler için kısa bir kod ürettiğinden, sitenizde widget’ınız da dahil olmak üzere HTML’yi destekleyen herhangi bir alana kopyalayıp eklersiniz. Bu, kenar çubuğunuzu ve altbilginizi sadece metinden daha fazlasını organize etmenin iyi bir yoludur.

Örneğin, görünüm> widget’lara gidebilir ve metin widget’ını kenar çubuğunuza veya altbilginize sürükleyebilirsiniz. Simge kısa kodunuzu üretmek için varsayılan simge ayar simgesi sekmesini kullanarak, eklemek istediğiniz diğer HTML ile birlikte içerik alanına yapıştırın. “Kaydet” tuşuna basın ve simge doğrudan sitenizde görüntülenir. Icomoon Icomoon’dan özel bir simge paketi içe aktarmak, ücretsiz simge yazı tiplerini bulmak için en iyi yerlerden biridir ve WP SVG simgesi eklentisi, kullanıcıların kullanmasına izin veren bir içe aktarma özelliğine sahiptir. Eklenti ile birlikte verilen varsayılan simge seti çok iyi olsa da, simgelerinizin bazılarının biraz farklı görünmesini isteyebilirsiniz ve Icomoon bunun için mükemmeldir. Başlamak için, uygulaması aracılığıyla Icomoon kütüphanesini ziyaret edin ve mevcut yazı tipi simgeleri koleksiyonunu keşfedin. Bazıları bir satın alma gerektirir, ancak ücretsiz olanın aşağıda bir +ekleme düğmesi olacaktır. Ne sevdiğinizi bulduğunuzda, +Ekle’yi tıklayın. Daha sonra koleksiyonda bulunan tüm simgeleri gösterilecektir. Şimdi ne istediğinizi seçmekte özgürsünüz. Yalnızca birkaç tane istiyorsanız bireysel bir simgeye tıklayın veya aynı anda birkaç simgeden satırları seçmek için Vites düğmenizi kullanın.

Seçtiğinizden memnun kaldığınızda ekranın altındaki yazı tiplerini tıklayın. Buradan, bazı ayarları ayarlama seçeneğiniz var – ekranın üst kısmındaki tercih düğmesini tıklayarak yazı tipi adınıza belirli bir şey verin veya sınıfın önekini değiştirin. Bitirdikten sonra ekranın altındaki indir düğmesini tıklayın ve yazı tipiniz bir zip dosyası olarak gelir. Şimdi WordPress yönetici alanınıza dönebilir ve WP SVG simgeleri> Özel Simge Set’e gidebilirsiniz. İndirme klasörünüzden ZIP dosyasını seçmek için Dosya Seç düğmesini tıklayın, ardından İçe Aktar düğmesini tıklayın. İthalat başarılı olursa, sayfada listelenen tüm yeni simgelerinizi görebilirsiniz. Şimdi her bir yayın veya sayfaya bir simge eklemek için simge ekle düğmesine tıkladığınızda, özel simgeni seçmek ve eklemek için yönlendirebileceğiniz varsayılan paket sekmesinin yanında yeni bir özel paket sekmesi göreceksiniz. Bir kerede kullanılabilen simge paketi. Simgeyi özel paketinizden eklemek veya silmek istiyorsanız, Özel Icon Set sekmesine geri dönmeniz ve her şeyi silmek için Paket’i kaldırmayı tıklamanız gerekir. Bundan sonra, istediğiniz yeni simgeyi seçmek, zip dosyasını indirebilir ve içe aktarmak için iComoon’a dönebilirsiniz. Özel bir simge paketini silerseniz, ancak yine de WordPress’te göründüğünü görürseniz, web tarayıcı önbelleğinizi boşaltmanız gerekebilir. Neden bu noktada prime yükseltmek isteyebilirsiniz, bu eklenti ile, simginizin rengini değiştirmek, gölgeleri eklemek gibi makalenin başında listelenen bu eklenti ile diğer tüm harika ayar seçeneklerini nasıl kullanacağınızı merak ediyor olabilirsiniz. animasyonlu efektler uygulamak.

Ne yazık ki, bu seçenek WP SVG simgeleri eklentisinin ücretsiz bir sürümü ile mevcut değildir.Ancak primdeki artış çok değerlidir.Premium sürümle, Yeni Gelişmiş Öznitelik düğmesi, simgeyi Gönderi veya Sayfaya Ekle’yi tıkladığınızda simge düzenleyicinizde görünecektir.
Simgenin boyutunu kolayca ayarlayacak, oraya köprü ekleyecek ve birkaç kez tekrarlayacak şekilde ayarlayacaksınız.Ayrıca güzel CSS3 animasyon efektleri sağlayabilir, belirli olayları eşleştirecek animasyonlar ayarlayabilir, sınıf adları ekleyebilir, rengi ayarlayabilir ve oynatabilirsiniz.Görünüşe gittiğinizde>
Menüler, bu premium eklenti sürümü aracılığıyla sunulan özel menü açılır menüsünü bulmak için menünün her sayfasını genişletebilirsiniz. Bu, varsayılan simgeye ayarlanır, ancak menü bağlantınıza biraz ekstra görsel cazibe eklemek için seçim simgeni seçmek için açılır menüyü kullanabilirsiniz. Daha fazla ayarlama seçenekine ve menü simgesi eklemesine ek olarak, premium sürüm ayrıca sınırsız miktarlarda özel simgeleri kullanmanıza, yön sayfanızda kullanım için simge kapları yapmanıza ve tüm simgeler için doğuştan gelen widget’ın desteğini kullanmanıza olanak tanır. Hatta çok özel bir özel görünüm elde edeceğiniz konusunda ihtiyaç duyabileceğiniz her sorun veya öneri için premium destek alıyorsunuz. Ücretsiz eklenti hızlı ve kolay yazı tipi ekleme için iyi bir temel seçenek sunarken, premium sürüm gerçekten bir sonraki seviyeye getirmenizi sağlar. Yalnızca 29 $ ile, yalnızca bir WordPress siteniz varsa oldukça uygun fiyatlı ve birkaç sitede kullanılabilir geliştirici ve işletme lisansları mevcuttur. Simge yazı tiplerini sarmak, yükleme süresini yavaşlatmadan, özel bir retina görüntüsü yapmaya zorlamadan veya görüntü ölçeklendirme sorunu hakkında endişelenmelidir. Neyse ki, iComoon ve Font Awesome gibi çevrimiçi olarak birkaç yüksek kaliteli ücretsiz yazı tipi simgesi paketleri de var. Kodu denemek zorunda kalmadan, sitelerindeki simgeyi mümkün olduğunca hızlı ve pürüzsüz ayarlamak isteyen kullanıcılar için, ücretsiz WP SVG simgeleri eklentisini kullanarak oldukça kolaydır.

Seviyeyi yükseltmek istiyorsanız, eklentinin premium sürümü keşfetmeye değer.Simgeleri kullanma hakkında daha fazla bilgi edinmek istiyorsanız, bkz. CSS Sprite ile WordPress’e Sosyal Medya simgeleri ekleme ve yazı tipleri hakkında okumak istiyorsanız, WordPress sitenizde (örneklerle) güzel yazı tiplerini nasıl bulacağınızı, seçeceğinizi ve yükleyeceğinizi okuyun.Konuyla ilgili fikrinizi duymaktan mutluluk duyarız.Şu anda WordPress sitenizde yazı tipi simgeleri mi kullanıyorsunuz?Yoksa bunu yapmak için bir planınız var mı?Aşağıdaki yorumlarda sahip olduğunuz ipuçlarını veya püf noktalarını paylaşın.Etiket: yazı tipi

admin

Bir Cevap Yazın

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