CSS Icons

CSS ile simgeler (icons) oluşturmak, görseller kullanmadan sayfanızda vektörel simgeler elde etmenin oldukça etkili bir yoludur. CSS simgeleri, daha hızlı yüklenir, renkleri ve boyutları kolayca değiştirilebilir, ayrıca responsive tasarımlar için oldukça uygundur. İşte CSS ile simge yapmanın birkaç temel yöntemi:

1. CSS ile Simgeler (Unicode Karakterleri)

CSS ile simge oluşturmanın en temel yollarından biri Unicode karakterlerini kullanmaktır. Unicode karakterleri, birçok yaygın simgeyi içerir ve yalnızca CSS ile kolayca stil verilebilir.

<p class="check-icon">&#10003; Tamamlandı</p>

.check-icon {
    font-size: 24px;
    color: green;
}

Bu örnekte, ✓ karakteri yeşil bir onay işareti (✓) olarak görünür.

2. Font Icon (Yazı Tipi Simgeleri)

Font Awesome gibi yazı tipi kütüphaneleri, web sayfalarına simge eklemek için popüler bir tercihtir. Bu kütüphaneler, simgeleri bir yazı tipi olarak sunar ve CSS ile özelleştirilmesi çok kolaydır.

Font Awesome Kullanarak:

Öncelikle, Font Awesome kütüphanesini HTML dosyanıza ekleyin:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Ardından, simgeyi bir HTML etiketinde kullanabilirsiniz:

<i class="fas fa-check-circle"></i>

CSS ile simgeyi özelleştirebilirsiniz:

.fas {
    color: blue;
    font-size: 20px;
}

3. Pure CSS ile Simgeler

Saf CSS kullanarak yalnızca şekiller ve renklerle simgeler de oluşturabilirsiniz. Aşağıda, yalnızca CSS ile bir ok simgesi oluşturulmuştur:

<div class="arrow-right"></div>

.arrow-right {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid black;
    display: inline-block;
}

Bu kod, yalnızca CSS ile oluşturulmuş sağa dönük bir ok simgesidir.

4. CSS Pseudo-Elements (::before ve ::after) ile Simgeler

Pseudo-elements, simgeleri metin öncesine veya sonrasına eklemek için oldukça kullanışlıdır. Örneğin, aşağıda bir onay simgesi pseudo-element ile eklenmiştir:

<p class="icon-text">Tamamlandı</p>

.icon-text::before {
    content: "✓";
    font-size: 18px;
    color: green;
    margin-right: 8px;
}

Bu yöntem, simgeleri yazı ile birlikte kullanmak istediğinizde oldukça işlevseldir.

5. SVG Kullanarak CSS ile Simgeler

SVG (Scalable Vector Graphics), CSS ile stil verilebilen bir başka vektörel simge türüdür. SVG, HTML içinde doğrudan kullanılabilir veya bir dosya olarak içe aktarılabilir.

SVG’nin HTML İçinde Kullanılması:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="heart-icon">
    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41 1 4.5 2.09C13.09 4 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>

.heart-icon {
    fill: red;
    width: 30px;
    height: 30px;
}

SVG simgeler, farklı ekran çözünürlüklerinde bozulmaz ve CSS ile kolayca renk değiştirilebilir.

CSS ile simge eklemenin birçok yolu vardır. Basit şekiller, pseudo-elements veya harici kütüphaneler sayesinde sitenize etkili ve şık simgeler ekleyebilirsiniz.