Font Awesome 5 Kullanımı

Font Awesome, web sitenize font simgeleri eklemenin en popüler yoludur. Font Awesome simgeler ölçeklenebilir vektörler kullanılarak oluşturulur, böylece herhangi bir ekran boyutunda iyi çalışan yüksek kaliteli simgeler kullanabilirsiniz.

Font Awesome İkonları


Font Awesome'un içerisinde 15-12-2019 tarihinde 7000'den fazla farklı ikon yer alıyor. Ücretsiz olarak 1544 icon ve ayrıca marka ve sosyal icon setide ücretsiz kullanarak istediğiniz elementleri çok daha görsel hale getirmek ve özellikle navigasyon menülerinde fark yaratabilmek mümkün. Font Awesome'un içerisinde yer alan tüm ikonları görmek istiyorsanız buraya tıklayarak ikonları görebilir ve son eklenen ikonlardan daima haberdar olabilirsiniz.

Profesyonelce Tasarlanmış İconlar


Her icon, çizimleri yıllarca iconların gösterilmesi ve tasarlanması deneyiminden kaynaklanan kurallara ve standartlara göre tasarlandı. Sonuç, binlerce iconu, üç benzersiz stilde yayan tutarlı bir görünüm vardır.

Font Awesome 5 ile gelen en büyük özellik Javascript ile SVG simgeler olarak kullanabilmeniz.

Tabii web font olarak eskisi gibi css ile de kullanabiliyorsunuz.

Font Awesome 5 ile birlikte script ve css dosyalarını doğrudan Font Awesome CDN’i üzerinden kullanabiliyorsunuz.

Font Awosome 5 kullanımı


Font Awesome 5 ile 7345 icon bir PRO sürümüne ve 1544 simgeli bir ÜCRETSİZ sürümüne sahiptir. Bu eğitici yazı, ÜCRETSİZ sürüme odaklanacaktır.

Ücretsiz Font Awesome 5 iconu kullanmak için Font Awesome kütüphanesini indirmeyi seçebilir veya Font Awesome'de bir hesaba kaydolabilir ve CDN destekli kitlere simgeleri her zamankinden daha hızlı ve daha güçlü yükler. Hiç kodu zorlamadan veya dosyaları yönetmeden değişiklikler yapın. web sitenize Font Awesome eklediğinizde kullanmak için bir kod (KIT KODU adı verilen) alabilirsiniz. burada emailinizi girin sizin email'e kod gelecektir.

KIT KOD yaklaşımını tercih ediyoruz. Kodu aldığınızda, web sayfalarınızda yalnızca bir satır HTML kodu ekleyerek Font Awesome'i kullanmaya başlayabilirsiniz:


<script src="https://kit.fontawesome.com/senin_code.js"></script>

ÖRNEK:

Kodu aldık 3c7ee6xxxx ve script etiketini ekleyerek, kodla birlikte Yazı Tipi Başarısını kullanmaya başlayabiliriz:


<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>

<i class="fas car-side"></i>

</body>
</html>

Not: İndirme veya kurulum gerekmez!

KİT KODUNZU ALIN


Kaydolun ve kendi kodunuzu ücretsiz olarak alın:

Font Awesome 5'de Yenilikler


Font Awesome 5'deki yenilikler fas ön-ekidir, Font Awesome 4'de fa kullanır

Fas'daki s katı anlamına gelir ve bazı simgeler ayrıca far ön-ek kullanılarak belirtilen normal moda da sahiptir:


<i class="fas fa-clock"></i>
<i class="far fa-clock"></i>

ÇIKTI:

Font Awesome, satır içi öğelerinde kullanılmak üzere tasarlanmıştır. <i>Ve <span> elementler iconlar için kullanılır.

Ayrıca, simgenin kabının yazı tipi boyutunu veya rengini değiştirirseniz, simgenin değiştiğini unutmayın. Aynı şeyler gölge ve CSS kullanarak miras kalan başka şeyler için de geçerli.


<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>

ÇIKTI:

Simgeleri Boyutlandırma


fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, Ya da fa-10x sınıfların simge, kaba göre boyutları ayarlamak için kullanılır.


<i class="fas fa-pencil-alt fa-xs"></i>
<i class="fas fa-pencil-alt fa-sm"></i>
<i class="fas fa-pencil-alt fa-lg"></i>
<i class="fas fa-pencil-alt fa-2x"></i>
<i class="fas fa-pencil-alt fa-5x"></i>
<i class="fas fa-pencil-alt fa-10x"></i>

ÇIKTI:

Liste Simgeleri


fa-ul Ve fa-li sınıflar sırasız listelerde varsayılan nokta yerine kullanılır.


<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
  <li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>

ÇIKTI:

  1. List Item
  2. List Item
  3. List Item

Animasyonlu Simgeler


fa-spin Sınıfı döndürmek için herhangi bir icona uygulanır ve fa-pulse sınıf 8 adımda döndürmek için herhangi bir icona uygulanır.


<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>

ÇIKTI:

Not: IE8 ve IE9, CSS3 animasyonlarını desteklemez.

Döndürülmüş ve Çevrilmiş İconlar


fa-rotate-* Ve fa-flip-* sınıflar döndürme ve çevirme simgeleri için kullanılır.


<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>

ÇIKTI:


İconları İstifleyin

Font Awesome ile birlikte gelen destek stiliyle iconlarınızı kolayca istifleyebilirsiniz. Birden fazla icon istiflemek için, istiflemek istediğiniz 2 iconun üst HTML öğesindeki fa-stack sınıfını kullanın. Ardından, düzenli olarak boyutlandırılmış icon için fa-stack-1x sınıfını ekleyin ve daha büyük icon için fa-stack-2x sınıfını ekleyin. fa-inverse, görünmez görünüm efektine yardımcı olmak için fa-stack-1x icona eklenebilir. Boyutlandırmanın daha da kontrolünü almak için ebeveyn üzerine daha büyük icon sınıfları bile atabilirsiniz.


<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>


ÇIKTI:

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5294

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.