Temel Simgeler
Yazı Müthiş simgelerini kullanmak için, içeride aşağıdaki satırı ekleyin <head> HTML sayfanızın bölümü:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Not: Hiçbir indirme veya yükleme gereklidir!
Sen önek kullanarak Yazı Müthiş yer ikonlarını fa ve simgesinin adını.
Örnek
Aşağıdaki kodu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>Sonuçlar içinde:
Müthiş Yazı satır içi elemanları ile kullanılmak üzere tasarlanmıştır. <i> ve <span> elemanları yaygın simgeleri için kullanılır.
Ayrıca simge'nın konteyner, simge değişikliklerinin font-size veya rengini değiştirmek eğer unutmayın. Aynı şeyler gölge ve CSS kullanarak kalıtsal alır başka bir şey için de geçerli.
Büyük Simgeler
fa-lg (33% increase) , fa-2x , fa-3x , fa-4x , ya fa-5x sınıflar simge, kaba göre boyutları artırmak için kullanılır.
Örnek
Aşağıdaki kodu:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Sonuçlar içinde:
Tip: simgeleriniz üst ve alt kesilmiş alıyorsanız, çizgi yüksekliği artar.
Liste Simgeler
fa-ul ve fa-li sınıfları sırasız listelerde varsayılan mermi değiştirmek için kullanılır.
Örnek
Aşağıdaki kodu:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Sonuçlar içinde:
- List icons
- List icons
- List icons
Bordered ve çekti Simgeler
fa-border , fa-pull-right veya fa-pull-left sınıflar çekme tırnak veya makale simgeleri için kullanılır.
Örnek
Aşağıdaki kodu:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Sonuçlar içinde:
Hareketli Simgeler
fa-spin sınıfı döndürmek için herhangi bir simge alır ve fa-pulse sınıfı 8 adımlarla dönecek şekilde bir simgeye.
Örnek
Aşağıdaki kodu:
<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>
Sonuçlar içinde:
Not: IE8 ve IE9 CSS3 animasyonları desteklemez.
Döndürülmüş ve Flipped Simgeler
fa-rotate-* ve fa-flip-* sınıflar döndürmek ve simgeleri çevirmek için kullanılır.
Örnek
Aşağıdaki kodu:
<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>Sonuçlar içinde:
Yığılmış Simgeler
Birden çok simgeleri yığını için, kullanımı fa-stack ana ilgili sınıfı, fa-stack-1x düzenli boyutlu simge için sınıf ve fa-stack-2x daha büyük bir simge için.
fa-inverse sınıfı alternatif simge rengi olarak kullanılabilir. Ayrıca daha fazla boyutlandırma kontrol etmek ebeveyne büyük simge sınıfları ekleyebilir.
Örnek
Aşağıdaki kodu:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<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"
style="color:red;"></i>
</span>
fa-ban on fa-cameraSonuçlar içinde:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Sabit Genişlik Simgeler
fa-fw sınıfı sabit bir genişlikte simgeler ayarlamak için kullanılır. farklı ikon genişliği hizalama atmak bu sınıf, yararlıdır. Bootstrap adlı navlists ve liste gruplarında özellikle yararlıdır.
Örnek
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> Kendin dene " çizme atkısı
Yazı Müthiş aynı zamanda tüm Bootstrap bileşenlerle iyi çalışıyor.