CSS İle Linklere İkon Ekleyelim

Bu sıralar CSS ile ilgili derslere ara vermiştim. Yeniden güzel bir anlatımla geri dönüş yaptım. Size anlatacağım derste bir linke nasıl ikon eklenir onu göstermek istiyorum. Bunun örnekleri zaten çeşitli sitelerde, bloglarda mevcut. Bir bağlantı verildiği zaman görsellik açısından güzel gözükmesini sağlayan ikonlar ile kullanıcıların dikkatlerini daha fazla çekebilirsiniz…

Örnek olarak wikipedia linklerinde ikon kullanıyor. Aşağıdan önizlemesine bakabilirsiniz.

Artık kodlarımızı yazmaya geçelim.

1. Adım - CSS Kodlaması

a:link {
font-family:Tahoma;
font-size:11px;
padding-right: 18px;
background:url(ok.png) no-repeat center right;
}

a:visited {
font-family:Tahoma;
font-size:11px;
padding-right: 18px;
background:url(ok.png) no-repeat center right;
}

Burada sayfadaki tüm linkleri etkileyecek şekilde ikonumuzu ekledik. Fontumuzu Tahoma olarak ayarladık boyutunu ise 11 pixel yaptık. Ardından background komutu ile ikonumuzu arkaplan olarak linkin sonuna gelecek şekilde ekledik.

2. Adım - Deneme

Yazdığımız CSS kodunu deneyelim isterseniz.

<a href=”http://www.baybars.net/”>Baybars.Net</a>

Demoya buradan ikona ise şuradan ulaşabilirsiniz. Bir sonraki CSS uygulamamızda görüşmek dileğiyle mutlu yarınlar.