Font Awesome 6: Tam İnceleme
Font Awesome, ölçeklenebilir vektör simgelerinin bir koleksiyonudur. Simgeler CSS özellikleri kullanılarak biçimlendirilebilir, renklerini, boyutlarını, gölgelerini ve çok daha fazlasını ayarlayabilir. Yazı tipi sürüm 5.5.0 605 simge içerir.
1 Font nasıl yüklenir
Yöntem 1.
Aşağıdaki kodu ekleyerek dosyanın font-awesim.css sürümünü kullanın.<head> bölüm:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Yazı tipi bağlandıktan sonra, sitenizdeki simgeleri kullanabilirsiniz.
Yöntem 2.
Yazı tipini font awesome 'dan indirin. Arşivi açın ve arşivden site sunucusuna iki klasör yükleyin - CSS ve yazı tipleri. Sitenizde bu tür adları olan klasörleriniz varsa, indirilen klasörlerden onlara dosya eklemeniz yeterlidir.
Dosyanın tam veya minifiye sürümünü kullanabilirsiniz:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Font Nasıl Kullanılır Harika simgeler
Simgeler bir web sayfasına iki şekilde eklenebilir:<i> ve<span> elements, veyaby adding them to the desired element using the :before, :after pseudo-elements vethe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: {content: "\ f015";/ * ev simgesi ekle */font-family: fontawesome; color: #aaaaaa; marj-sağ: 10px;}1 standart simge
Font Awesome, satır içi öğelerle kullanılmak üzere tasarlanmıştır. Simgeler eklemek için önce FA sınıfını ayarlamanız gerekir.<i> veya<span> eleman.
Seçilen simgeyi öğeden önce veya sonra eklemek için boş bir<i></i> veya<span></span> Eleman, bir simge sınıfı atanan öğeye ve stili genişleten ek bir sınıfa eklenir.
<i class="fa fa-camera-retro"></i>2 büyük simge
Bir simgenin konteynerine göre boyutunu arttırmak için FA-LG (% 33 artış), FA-2X, FA-3X, FA-4X, FA-5X sınıflarını kullanın.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 Sabit Genişlik Simgeleri
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation veyalists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Ev</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Kütüphane</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Başvuru</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Ayarlar</a ></li></ul>Bülten listesi için 4 simge
Varsayılan mermileri değiştirmek için FA-U ve Fa-li sınıflarını kullanın.<ul>…</ul> maddeli liste.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Liste Öğesi</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Liste Öğesi</li> <li><i class="fa-li fa fa-square"></i>Liste Öğesi</li></ul>5 çerçeveli simgeler ve alıntılar
Use the fa-border class to set the border for the icon. The pull-right vepull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem iPsum Dolor Sit amet, Consectetur SiPiscing Elit. Donec Nec Purus Congue, Posuere Libero In, Porta Sapien. Sed Elit Lectus'ta. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 Animasyon İkonları
Dönme simgeleri ayarlamak için FA-spin, FA-Pulse, FA-Refresh, FA-COG sınıflarını ekleyin. Animasyon IE8 - IE9'da desteklenmez.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 Dönüştürülmüş Simgeler
Simgeleri döndürmek veya çevirmek için Fa-Rotate-* ve FA-Flip-* sınıflarını kullanın.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 kombinasyon simgesi
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, vefa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes vecss code to insert using the content property
Web uygulamaları için simgeler FA -ADJUST - \ F042;FA -ANCHOR - \ F13D;
FA -Archive - \ f187;
FA -BROWS - \ F047;
FA -BEDISISK - \ F069;
FAAT - \ f1fa;
Fa-Balance-Scale-\ f24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
Fa-basty-boş-\ f244;
Fa-battery-half-\ f242;
Fa-basty-çeyrek-\ f243;
Fa-battery-üç çeyrek-\ f241;
Fa-bittery-full-\ f240;
Fa -yat - \ f236;
Fa -sheer - \ f0fc;
Fa -Bell - \ f0f3;
Fa-Bell-Slash-\ f1f6;
Fa -binoküler - \ f1e5;
FA-doğumday-cake-\ f1fd;
Fa -cıvatalı - \ f0e7;
Fa -bomb - \ f1e2;
FA -Book - \ f02d;
Simgeleri döndürmek veya çevirmek için Fa-Rotate-* ve FA-Flip-* sınıflarını kullanın.
4 İlgili Kaynak
Font Awesome Collection'a ek olarak, diğer simge yazı tiplerini de kullanabilirsiniz.
Fontello.Fontello çeşitli simge yazı tiplerinden oluşan geniş bir koleksiyona sahiptir. Beğendiğiniz simgeleri seçebilir ve bilgisayarınıza indirebilirsiniz.
Temel simgesi.Foundation Icon , Foundation Framework geliştiricilerinden başka bir simge yazı tipi koleksiyonudur. Standart simgelere ek olarak, site yuvarlak ikonlar, sosyal medya simgeleri ve daha fazlasını içerir.
Malzeme simgeleri.Malzeme simgeleri, Google'ın algı kolaylığını somutlaştıran birleşik düz simgelerdir. Simgeler, tüm ortak platformlarda ve tüm ekran çözünürlüklerinde güzel ekran için optimize edilmiştir.
Simge yazı tipi koleksiyonu 750+ simge içerir. Web sitenize bir koleksiyon yüklemenin en kolay yolu, Google Web yazı tipleri gibi simgeleri kullanmaktır. Bunu yapmak için aşağıdaki kod sayfa işaretlemesine dahil edilmiştir:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Yazı tipini tarayıcılarda doğru şekilde görüntülemek için, simge yazı tipini kullanacak öğeye malzeme-ikonlar sınıfı verilir:
Malzeme-ikonlar {font-family: 'Malzeme simgeleri'; Yazı Tipi: Normal yazı tipi tarzı: Normal yazı tipi boyutu: 24 piksel; / * Tercih edilen simge boyutu */ ekran: satır içi blok; Genişlik: 1em; Yükseklik: 1em; çizgi yüksekliği: 1; Metin-Transform: Yok; Mektup Alanı: Normal Kelime Sızması: Normal; Beyaz boşluk: nowrap; yön: ltr; -Webkit-FONT-Smoothing: Antialiased; / * Tüm WebKit tarayıcıları tarafından desteklenir */ Text-Render: OptimizeEGibility; / * Safari ve Chrome Desteği */ -moz-OSX-FONT-Smoothing: Grayscale; /* Firefox desteği. */ Font-Feature-Settings: 'Liga'; /* IE Destek. */}Simgelerin kendileri kullanılarak eklenir.<I class=''material-ikonlar''>simgenin ligatürü veya html kodu</i> Örneğin etiket:
<i class="material-ikonlar">hesap_balance_wallet</i><i class="material-ikonlar"></i>Ligature, tüm modern tarayıcılar tarafından anlaşılır, yani. Sürüm 10'dan başlayarak simge kodu otomatik olarak oluşturulur, çünkü simge görüntüsüne sol tıklamanız ve önerilen görünümü kopyalamanız gerekir.
İkon boyutu
İkon boyutu is controlled by additional classes:
.Material-ikonlar.md-18 {yazı tipi boyutu: 18px;} /*<i class="material-ikonlar md-18"></i> */.Material-ikonlar.md-24 {yazı tipi boyutu: 24px;} /*<i class="material-ikonlar md-24"></i> */.Material-ikonlar.md-36 {yazı tipi boyutu: 36px;} /*<i class="material-ikonlar md-36"></i> */.Material-ikonlar.md-48 {yazı tipi boyutu: 48px;} /*<i class="material-ikonlar md-48"></i> */Simge rengi
Simgelerin rengi ek sınıflar kullanılarak da ayarlanır:
.Material-ikonlar.md-dark {renk: RGBA (0, 0, 0, 0.54);} /*<i class="material-ikonlar md-dark"></i> */.Material-ikonlar.MD-Light {Renk: RGBA (255, 255, 255, 1);} /*<i class="material-ikonlar md-light"></i> */.Material-ikonlar.md-dark.md-inaktif {color: rgba (0, 0, 0, 0.26);} /*<i class="material-ikonlar md-dark md-inactive"></i> * /.Material-ikonlar.md-light.md-inctif {color: rgba (255, 255, 255, 0.3);} /*<i class="material-ikonlar md-light md-inactive">yüz</i> */Özel bir renk ayarlamak için, örneğin simgenin rengini tanımlayan bir sınıf eklemeniz gerekir:
.Material-ikonlar.indigo {color: #1A237E;} /*<i class="material-ikonlar indigo"></i> */Sık Sorulan Sorular
- Font Basit terimlerle harika nedir?
- Özünde, görünürlüğünü ve tasarımını geliştirmek için herhangi bir Web sayfası öğesine eklenebilen simgelere sahip bir yazı tipidir. Koleksiyon, herhangi bir görev ve amaç için uygun yüzlerce simgeden oluşur.Bu bağlantı hakkında daha fazla bilgi
