Font Awesome FontAwesome Kullanımı Öğrenimi Eğitimi
Sizlere bu konumuzda Font Awesome Kullanımı Öğrenimi ve Eğitimi üzerine temel bilgiler verelim dedik. Birlikte öğrenelim.
 |
| Font Awesome |
Font Awesome üst düzey kullanıcısı olarak ücretli veya normal kullanıcı olarak ücretsiz ikon kullanma imkanı bizlere sunmaktadır.
Konuyu uzatmadan, sizleri sıkmadan nasıl kullanacağınıza yönelik bilgilere bakalım. Görünür de zor gibi olabilir ama işin içine girdiğinizde ve ufak bir araştırma sonucunda kolaylıkla kavrayabileceğinizi düşünüyorum. Sitenize mükemmel, profesyonel görüntü sağlamak istiyorsanız ve özellikle sitenizde görsellerin site hızını etkilediği düşüncesi göz önüne aldığımız zaman, inanılmaz yararı olacağını kendiniz de görebileceksiniz. Daha önce Font Awesome ile ilgili bir çok konular açıldı sitemizde. Konu altındaki Font Awesome etiketine tıklamanız sonucunda, var olan önceki konulara ulaşabilirsiniz. Yararlı olması dileğiyle. Uzatmadan başlayalım. Bende sizler gibi yeniyim ama başlangıç seviyesi olarak kendi siteme bir çok değişiklikleri Font Awesome sayesinde yaptığımı belirtmek isterim.
Öncelikle sitenizin head tagları arasına aşağıdaki kodu eklemeniz gerekir. Bu kod sayesinde sitenize dosya yükleme, eklenti kurulumu vs.. gibi bir işlem yapmanıza gerek kalmayacaktır.
Yukarıda vermiş olduğumuz kodu kit aracılığıyla Font Awesome'i kullanmak istediğiniz projenizdeki her şablonun veya sayfanın <head> bölümüne kopyalayın. dedik.
Kodu sitenizin head tagları alanına eklediğinizi varsayarak; şimdide aşağıdaki kodları eklediğimizde ne gibi sonuçlar çıkacak. Bakalım.
<i class="fas fa-clock"></i> | <i class="far fa-clock"></i>
Çıktı sonucu:
Başka bir örnek:
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>AkSEO</li><li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>AkSEO</li><li><span class="fa-li"><i class="fas fa-square"></i></span>AkSEO</li>
Çıktı:
AkSEO
AkSEO
AkSEO
Animasyonlu Font Awesome Örnekleri:
<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>
Çıktı:
Peki bu ikonlara nereden ulaşabilirsiniz.
https://fontawesome.com/icons
--
Akblog.NET
