Michael Cain
0 
1180
91
Simgeleri duydunuz ve neredeyse kesinlikle yazı tiplerini duydunuz. Simge Yazı Tipi? Bugün size ikon yazı tiplerinin ne olduğunu ve web sitenizi canlandırmak için nasıl kullanabileceğinizi göstereceğim. Başlayalım.
Simge Yazı Tipleri Nedir??
Simge yazı tipleri tam olarak aynıdır “düzenli” fontlar - bir metnin görünüşünü ve hissini tanımlarlar. Buradaki en büyük fark, ikon fontlarının harf ve rakam içermemesi, sembol ve simgeler içermesidir. Şununla karıştırabilirsin, çünkü annene mektup yazamıyorsan, fontun ne faydası var?!
Simge yazı tipleri, öncelikle web sitelerine stil vermek için kullanılır. Vektör tabanlı oldukları için, CSS'yi Öğrenme ve Kick-Ass CSS Büyücüsü Olma CSS 5 Bebek Adımları kullanılarak yeniden boyutlandırılabilir, taşınabilir, stilize edilebilir ve değiştirilebilir. CSS'yi Öğrenme ve Kick-Ass CSS Büyücü Olma 5 Bebek Adımları CSS son on yılda en önemli değişiklik web sayfalarının tek bir kısmı görüldü ve stil ile içeriğin ayrılmasının önünü açtı. Modern bir şekilde, XHTML semantik yapıyı tanımlar…. Bu, görüntüler gibi geleneksel tasarım yöntemlerine göre çok büyük bir avantaj sağlar. Çok sayıda simgenin görünümü ve hissi, sadece birkaç kod satırı ile değiştirilebilir. Herhangi bir görüntüyü düzenlemek, Photoshop'u açmak veya yeni dosyaları yüklemek zorunda değilsiniz - yalnızca kod yazmanız yeterlidir.
Başlamak
Bu örnekler için Font Awesome'i kullanacağım, ancak teori diğer birçok font paketine de uygulanabilir..
İşte başlangıç HTML'si:
MUO Simge Yazı Tipleri html font-family: helvetica, arial; Bu, bir web sayfası oluşturmak için gereken minimum HTML miktarıdır. Çoğunluğunu açıklamayacağım, çünkü bir web sitesinin nasıl yapılacağı konusundaki rehberimizde.
En önemli satır şudur:
Bu, Yazı Tipi Başar stil sayfasını CDN'sinden yükler. Bu satır olmadan web siteniz Font Awesome’in ne olduğunu bilemez, bu yüzden oldukça önemlidir. Bu stil sayfası, web fontlarını gömme konusundaki tüm zor işleri üstlenir ve genellikle sizin için işleri çok kolaylaştırır.
Yazı tipi Başar simgeleri, eklenen CSS sınıfları tarafından tanımlanır. ben etiketleri. Bunlar, ekli tarayıcı ya da varsayılan tanımlanmış stilleri olmadığından seçildi, bu nedenle simgeleriniz berbat olmayacak. Alternatif olarak, sınıfları da karış etiketler, ancak bu HTML’nizi bozar.
İşte temel kullanım. Bunu içine koy. vücut etiketler:
İlk İkonumİşte neye benziyor:
Bu ne kadar kolaydı? Yıkalım. Font Awesome'in çalışması için gereken iki sınıf vardır. İlk denir fa, hangi yazı tipi Başar anlamına gelir. Bu hangisini kullanırsanız kullanın, herhangi bir simge için gereklidir. İkinci sınıf, kullanmak istediğiniz simgeyi belirtir - bu herhangi bir şey, bir uçak, bir kişi veya kredi kartı olabilir. Bu da ekli fa, ve bu bir çark simgesi olduğundan, onun adı fa-dişli. Font Awesome’deki tüm simgelerin listesini web sitesinde görüntüleyebilirsiniz..
Simgeyi dişlisinden başkasına çevirmeyi deneyin.
Daha Derine Gitmek
Temel bilgileri öğrendikten sonra, bazı gelişmiş numaraların zamanı geldi..
Kendi CSS'inizi yazmak istemiyorsanız, doğrudan Font Awesome'de yerleşik olan stilleri kullanabilirsiniz. Simgeleri büyütmek için kullanabileceğiniz birçok sınıf vardır:
Kullanılacak başka bir faydalı sınıf fa-Spin. Bu, simgeleri döndürmenizi 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önme derecelerini tanımlar, ancak uzaklaşmayın. İle sınırlıdır 90, 180, veya 270.
Yapabileceğin son bir numara istifleme. fa-yığın sınıf, iki veya daha fazla simgeyi birlikte birleştirmenize izin verir. İşte kod:
İşte neye benziyor:
Tüm bu çeşitli sınıfları birleştirmeye başladığınızda, olasılıklar gerçekten sonsuzdur.
Özel CSS
Çünkü simge yazı tipleri sadece yazı tiplerini, tıpkı herhangi bir öğeyi yaptığınız gibi, onları CSS ile biçimlendirebilirsiniz. Küçük bir CSS3 kullanarak uzun bir yol gidebilir:
İşte bu simgenin HTML'si:
İşte CSS:
@keyframes [margin-left: 0; ila kenar boşluğu: 400 piksel; .bike animation-name: move; animasyon süresi: 4s; Bu CSS oldukça basit, ancak büyük bir etkiye sahip. Bu bir CSS dersi değil, bu nedenle CSS'yi öğrenmek isteyebilirsiniz CSS'ye Bir Adım Girmek İçin Bir Adım Jedi Master CSS'e Bir Adım Girmek İçin Bir Adım Jedi Master'a (CSS) kesinlikle en önemli teknolojilerden biri Bugün internette ve çoğu insan küçük bir HTML bildiğini itiraf ederken, genellikle CSS konusunda habersiziz. İçimdeki çalışmalar hakkında daha fazla bilgi edinmek istiyorsanız, sizi en son tanıttım..
Gerçekten yapmak istersen bazı özel şeyler yapabilirsin:
Bu, web için dosya boyutunu küçültmek için biraz tıngırtıyor. İşte HTML:
İşte CSS:
@keyframes fade from opacity: 0; ila opacity: 1; .person opacity: 0; animasyon adı: solmaya; # p1 renk: kırmızı; animasyon süresi: 2 sn; # p2 renk: turuncu; animasyon süresi: 4s; # p3 renk: yeşil; animasyon süresi: 6 sn; # p4 animasyon süresi: 8 sn; Önceki örnekte olduğu gibi, bu CSS3 animasyonlarını kullanır. Denilen bir animasyon karartmak yaratılır ve her kişi simgesi bu animasyonu farklı zamanlamalarla uygular. Bu simgeler ve CSS3 ile çılgına dönme potansiyeli var.
Hepsi bugün için. Artık web sitenizi canlandırmak için Icon Fonts'u kullanabilmelisiniz! Becerilerinizden henüz tam olarak emin değilseniz, bu CSS şablon sitelerini inceleyin 11 CSS Şablon Siteleri: Sıfırdan Başlama! 11 CSS Şablon Siteleri: Sıfırdan Başlama! Hepsi modern tasarım trendlerini ve teknolojilerini kucaklayan, çevrimiçi olarak sunulan binlerce ücretsiz CSS şablonu vardır. Bunları orijinal formlarında kullanabilir veya kendiniz yapmak için özelleştirebilirsiniz. , veya bu YouTube kanallarına başlamak için Web Tasarımını mı öğrenmek istiyorsunuz? 7 Başlamanız için YouTube Kanalları Web Tasarımını Öğrenmek İster misiniz? 7 Başlamanız için YouTube Kanalları YouTube, web tasarımı yeni başlayanlar için binlerce videoya ve kanala sahiptir. Burada başlamak için en iyilerinden bazılarına göz atıyoruz. web tasarımı ile.
Bugün yeni bir şey öğrendin mi? En sevdiğiniz Icon Font nedir? Aşağıdaki yorumlarda bize bildirin!