Css Icon Kullanımı Nasıl Yapılır ?

nhtctn nhtctn

Projelerimizde kullanabileceğimiz bir sürü icon kütüphaneleri mevcut ama bunlardan popüler olanlardan bir tanesi fontawesome kütüphanesidir.

site:https://fontawesome.com/

Ş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;
        }

Yorum yazın

BENZER YAZILAR