Simge yazı tipleri siteniz için harika: İşte neden

İlan

Simgeleri duydunuz ve neredeyse kesinlikle yazı tiplerini duydunuz, ancak Simge Yazı Tipi? Bugün size hangi simge yazı tiplerini ve bunları web sitenizi canlandırmak için nasıl kullanabileceğinizi göstereceğim. Başlayalım.

Simge Yazı Tipleri Nedir?

Simge fontları “normal” fontlarla tamamen aynıdır - bir metnin görünüşünü ve hissini tanımlarlar. Buradaki en büyük fark, simge yazı tiplerinin harf ve sayı değil, sembol ve simge içermesidir. Annenize mektup yazamıyorsanız, bir yazı tipi ne kadar iyi olursa, bununla karıştırılmış olabilirsiniz!

Simge yazı tipleri, öncelikle web sitelerini biçimlendirmek için kullanılır. Vektör tabanlı olduklarından, yeniden boyutlandırılabilir, taşınabilir, stilize edilebilir ve CSS CSS Öğrenmenin ve Tek Başına CSS Büyücüsü Olmanın 5 AdımıCSS, web sayfalarının son on yılda gördüğü en önemli değişikliktir ve stil ile içeriğin ayrılmasına yol açtı. Modern bir şekilde, XHTML semantik yapıyı tanımlar ... Daha fazla oku . Bu, görüntüler gibi geleneksel tasarım yöntemlerine göre büyük bir avantaj sağlar. Çok sayıda simgenin görünümü ve hissi sadece birkaç satır kodla değiştirilebilir. Herhangi bir resmi düzenlemeniz, Photoshop'u açmanız veya yeni dosyaları yüklemeniz gerekmez; sadece kod yazmanız yeterlidir.

Başlangıç

Kullanacağım Harika Yazı Tipi ancak bu teori diğer birçok font paketine de uygulanabilir.

İşte başlangıç ​​HTML'si:

Bu, bir web sayfası oluşturmak için gereken minimum HTML miktarıdır. Bu konudaki kılavuzumuzda ele aldığımız için, çoğunluğunu açıklamayacağım web sitesi nasıl yapılır.

En önemli çizgi şudur:

Bu, Font Awesome stil sayfasını CDN. Bu satır olmadan, web siteniz Font Awesome'in ne olduğunu bilemez, bu yüzden oldukça önemlidir. Bu stil sayfası, web yazı tiplerini gömmenin tüm zor işlerini halleder ve genellikle işleri sizin için çok daha kolay hale getirir.

Font Awesome simgeleri, CSS sınıfları tarafından tanımlanır. ben etiketleri. Bunlar, herhangi bir tarayıcı veya varsayılan tanımlı stile sahip olmadıkları için seçildi, bu nedenle simgeleriniz tamamen dağılmayacak. Alternatif olarak, sınıfları karış etiketler, ancak bu HTML'nizi karmaşıklaştırır.

İşte temel kullanım. Bunu senin içine koy vücut etiketler:

 İlk İkonum

İşte böyle görünüyor:

Ne kadar kolaydı? Hadi yıkalım. Font Awesome'in çalışması için iki sınıf gerekir. İlk denir fa, Font Awesome anlamına gelir. Hangisini kullanırsanız kullanın, herhangi bir simge için bu gereklidir. İkinci sınıf kullanmak istediğiniz simgeyi belirtir - bu herhangi bir şey, bir uçak, bir kişi veya kredi kartı olabilir. Buna ayrıca öneki eklenir fave bu bir dişli çark simgesi olduğu için adı fa-dişli. Tüm listelerin listesini görebilirsiniz. Font Awesome'deki simgeler kendi web sitesinde.

Simgeyi dişli kutusundan başka bir taneye değiştirmeyi deneyin.

Daha derine inmek

Temel bilgileri öğrendikten sonra, bazı gelişmiş numaralar zamanı.

Kendi CSS'nizi yazmak istemiyorsanız, Font Awesome'de yerleşik stilleri kullanabilirsiniz. Simgeleri büyütmek için kullanabileceğiniz birçok sınıf vardır:

Kullanılacak diğer bir yararlı sınıf ise fa-Spin. Bu, simgelerin dönmesini sağlar ve önceki boyut sınıflarıyla birleştirildiğinde bazı güzel efektler üretebilirsiniz. İşte kod:

İşte sonuç:

Simgeleri döndürmek kolaydır - fa-döndür sınıf:

Sondaki sayı, simgenin dönüş derecesini tanımlar, ancak taşınmaz. Sınırlısın 90, 180veya 270.

Yapabileceğiniz son bir numara istiflemektir. fa-yığın class, iki veya daha fazla simgeyi bir araya getirmenizi sağlar. İşte kod:

İşte böyle görünüyor:

Tüm bu çeşitli sınıfları birleştirmeye başladığınızda, olasılıklar gerçekten sonsuzdur.

Özel CSS

Simge yazı tipleri sadece yazı tiplerini, diğer tüm öğelerde yaptığınız gibi CSS ile biçimlendirebilirsiniz. Biraz CSS3 kullanmak uzun bir yol kat edebilir:

İşte bu simgenin HTML'si:

İşte CSS:

@keyframes {alanından {margin-left: 0; } - {kenar boşluğu-sol: 400 piksel; } } .bike {animation-name: move; animasyon süresi: 4s; }

Bu CSS oldukça basit, ancak büyük bir etkisi var. Bu bir CSS eğitimi değil, bu yüzden CSS öğren 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu ÖrneğiCSS kullanımı hakkında daha fazla bilgi edinmek ister misiniz? Başlamak için bu temel CSS kodu örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın. Daha fazla oku iç çalışmalar hakkında daha fazla bilgi edinmek istiyorsanız.

Gerçekten yapmak istiyorsanız bazı özel şeyler yapabilirsiniz:

Bu, web için dosya boyutunu azaltmak amacıyla biraz kekeliyor. İşte HTML:

İşte CSS:

@keyframes fade {{{opacity: 0; } ila {opaklık: 1; } }. kişi {opaklık: 0; animasyon adı: solmaya; } # p1 {renk: kırmızı; animasyon süresi: 2s; } # p2 {renk: turuncu; animasyon süresi: 4s; } # p3 {renk: yeşil; animasyon süresi: 6s; } # p4 {animasyon süresi: 8s; }

Önceki örnekte olduğu gibi, bu da CSS3 animasyonlarını kullanır. Adlı bir animasyon karartmak oluşturulur ve her kişi simgesi bu animasyonu farklı zamanlamalarla uygular. Bu simgeler ve CSS3 ile çıldırmak için çok fazla potansiyel var.

Hepsi bugün için. Artık web sitenizi canlandırmak için Icon Fontları kullanabilmelisiniz! Yeteneklerinizden henüz emin değilseniz, bunlara göz atın CSS şablon siteleri 11 CSS Şablon Siteleri: Sıfırdan Başlamayın!Tümü modern tasarım trendlerini ve teknolojilerini kapsayan binlerce ücretsiz CSS şablonu bulunmaktadır. Bunları orijinal formlarında kullanabilir veya kendiniz yapmak için özelleştirebilirsiniz. Daha fazla oku veya bunlar Başlamak için YouTube kanalları Web Tasarım Öğrenmek İster misiniz? Başlamak için 7 YouTube KanalıYouTube, web tasarımına yeni başlayanlar için binlerce video ve kanala sahiptir. Burada başlamak için en iyi olanlardan bazılarına bakıyoruz. Daha fazla oku web tasarımı ile.

Bugün yeni bir şey öğrendin mi? En sevdiğiniz Simge Yazı Tipi nedir? Aşağıdaki yorumlarda bize bildirin!