nhtctnProjelerimizde kullanabileceğimiz bir sürü icon kütüphaneleri mevcut ama bunlardan popüler olanlardan bir tanesi fontawesome kütüphanesidir.
Şimdi bu iconları nasıl kullanacağımıza bakalaım.
Bu sitede ücretli ve ücretsiz iconlar bulunmakta ücretsiz iconlar ihtiyaçlarımızı karşılayacak seviyededir.
İlk başta yapmamız gereken kütüphane linkini projemizin head bölümüne dahil etmek olacaktır.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">Ardından icon menusu tıklayarak istediğimiz iconu seçerek icon etiketini kopyalayıp projemizde kullanmak olacaktır.
Örnek olması açısından bir tane icon linkini aşağıya bırakıyorum.
<i class="fas fa-home"></i>İcon boyutlarını büyütmek için aşağıdaki kullanımlar mevcuttur.Aşağıdaki görselde de belirtildiği class isimlerini iconun yanına yazara boyutunu büyütebilirsiniz.
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
İcon renk değiştirme
<i class="fas fa-camera fa-10x"></i>
<i class="fas fa-ghost fa-10x"></i> .fa-camera {
color: green;
}
.fa-ghost {
color: red;
}
Loading image iconları
<div class="fa-3x">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-ghost fa-spin"></i>
</div> i {
color: green;
}