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.

Tabiki 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 KODUNUZU 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:

List Item
List Item
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:

Crosel 13/10/2022

Merhaba İconlara Nasıl LİNK Eklerim

yönetici 18/10/2022

İconlarını link etiketi ile sararsan link verebilirsin.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET